我该如何做这个布局？

代码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“递减”是由结束。

你可以帮我解决这个问题吗？做这个的最好方式是什么？

预先感谢您！

来源

2016-09-21 John Smith

请检查以下代码以获得答案。您也可以验证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; 
}

来源

2016-09-21 06:23:44 Sasikumar

图像必须走出去的容器（请看我的绘图位置的图片）另外，它们不应该使用固定宽度的div .left和.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; 
}

来源

2016-09-21 06:46:13 pradeep

它只是回答“约翰史密斯”的问题。 – 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>

来源

2016-09-21 06:46:28 Ayaz

试试这个位置的代码可能解决您的问题

*{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>

来源

2016-09-21 07:24:41

我该如何做这个布局？

回答

相关问题