Question

我有这个样本：

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

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

基本上我希望图像能够超过容器而且可以使用＃34; desc＆＃34;到最后。

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

提前谢谢！

Answer 1

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

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

Answer 2

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

Answer 3

请查看以下代码：

只需要改变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;
}

Answer 4

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

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

我该怎么做这个布局？

4 个答案: