我該如何做這個佈局？

代碼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

我該如何做這個佈局？

回答

相關問題