我该如何做这个布局?
问题描述:
我有这样的例子:我该如何做这个布局?
代码HTML:
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc">
details
</div>
</div>
CODE CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
}
img{
width:612px;
height:412px;
border:10px solid white
}
我把图像,以更好地了解他们想要什么要做
基本上我想要的图像将超过容器和divul“递减”是由结束。
你可以帮我解决这个问题吗?做这个的最好方式是什么?
预先感谢您!
答
请检查以下代码以获得答案。您也可以验证codepen https://codepen.io/sasikumarhx/pen/VKmQod
HTML:
<div class="container">
<div class="left">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
</div>
<div class="right">
<div class="desc">
details
</div>
</div>
</div>
CSS:
body{
background:black;
}
.container{
background:#f3f4f6;
border:5px solid #db5207;
height:250px;
}
.right{
float:right;
width:49%;
}
.left{
float:left;
width:49%;
}
.image-container{
}
.desc{
background:red;
}
img{
width:50%;
height:130%;
border:10px solid white;
float:right;
}
答
请检查下面的代码:
只需要在CSS改变:
body{
background:black;
}
.container{
background:#f3f4f6;
border-bottom:5px solid #db5207;
margin-top: 50px;
height: 380px
}
.image-container,.desc{
display:inline-block;
vertical-align:top;
}
.desc{
background:red;
min-height: 380px;
display: inline-block;
}
img{
width:612px;
height:412px;
border:10px solid white;
position: relative;
top:-20px;
}
+0
它只是回答“约翰史密斯”的问题。 – pradeep
答
请检查以下,如果它满足您的要求:
<!DOCTYPE html>
<html>
<head>
<title>Solution</title>
<style type="text/css">
#container {
background-color: #DCDCDC;
position: relative;
left: 100px;
top: 100px;
width: 800px;
height: 200px;
padding: 5px;
}
#image {
background-color: #F0E68C;
width: 200px;
height: 255px;
position: relative;
left: 150px;
top: -80px;
}
#details {
background-color: #FF7F50;
position: relative;
width: 400px;
left: 380px;
top: -310px;
height: 190px;
}
h2 {
margin-top: 5px;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="container">
<h2>container</h2>
<div id="image">
<h2>image</h2>
</div>
<div id="details">
<h2>details</h2>
</div>
</div>
</body>
</html>
答
试试这个位置的代码可能解决您的问题
*{margin:0;padding:0;}
.container{margin:100px 0;height:200px;border:5px solid red;position:relative;}
.image-container{height:300px;width:30%;border:5px solid blue;position:absolute;right:55%;top:-30%;}
.image-container img{height:300px;width:100%;}
.desc-container{height:190px;width:50%;border:5px solid green;float:right;}
<div class="container">
<div class="image-container">
<img src="http://media.caranddriver.com/images/16q2/667343/2016-ford-focus-rs-vs-subaru-wrx-sti-vw-golf-r-comparison-test-car-and-driver-photo-667344-s-original.jpg" alt="car1" title="car1" />
</div>
<div class="desc-container">
details
</div>
</div>
图像必须走出去的容器(请看我的绘图位置的图片) 另外,它们不应该使用固定宽度的div .left和.right –