Html 我怎么做这个布局？_Html_Css_Layout

Html 我怎么做这个布局？

html css layout

Html 我怎么做这个布局？,html,css,layout,Html,Css,Layout,我有这个样本：代码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-or

我有这个样本：

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

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
}

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

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;
}

我放了一张图片，以便更好地了解他们想要做什么

基本上，我希望图像是在容器和divul“desc”结束

你能帮我解决这个问题吗？最好的方法是什么

提前谢谢你

检查以下代码以获得答案。您还可以验证代码笔

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>

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
}

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

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;
}

如果满足您的要求，请检查以下内容：

<!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>


解决方案
#容器{
背景色：#DCDC；
位置：相对位置；
左：100px；
顶部：100px；
宽度：800px；
高度：200px；
填充物：5px；
}
#形象{
背景色：#F0E68C；
宽度：200px；
高度：255px；
位置：相对位置；
左：150px；
顶部：-80px；
}
#细节{
背景色：#FF7F50；
位置：相对位置；
宽度：400px；
左：380px；
顶部：-310px；
高度：190px；
}
氢{
边缘顶部：5px；
左边距：5px；
}
容器
形象
细节

在此处尝试此代码，它可能会解决您的问题

*{margin:0；padding:0；}
.container{边距：100px 0；高度：200px；边框：5px实心红色；位置：相对；}
.image容器{高度：300px；宽度：30%；边框：5px纯蓝色；位置：绝对；右侧：55%；顶部：-30%；}
.image容器img{高度：300px；宽度：100%；}
.desc容器{高度：190px；宽度：50%；边框：5px纯绿色；浮动：右侧；}


细节

图像必须从容器中取出（请查看我的绘图位置的图片），并且它们不应使用固定宽度的div。left和。right这只是“John Smith”问题的答案。