Question

我使用以下代码来创建两个div，一个大的灰色，一个在其中也有一个图像在右边。代码很好但两个div都没有扩展到图像结束的地方......我该如何解决这个问题？

<style>
div.div1 {
background-color: #F1F1F1;
border: 1px solid #CCCCCC;
padding: 10px;
}
div.div2 {
background-color: #e2d8ba;
border: 1px solid #000000;
padding: 10px;
text-align: justify;
}
</style>
<div class="div1">
<div class="div2">
<img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;">
Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div>
</div>

Answer 1

由于图像是浮动元素，因此将$curl_opts = array( CURLOPT_PUT => true, CURLOPT_INFILE => $file, // this refers to 's3://path-to-object' CURLOPT_INFILESIZE => $size, CURLOPT_UPLOAD => true, CURLOPT_HTTPHEADER => array('Expect: ', 'Content-Range: replaced...') );添加到两个DIV：

＆＃13;

overflow: auto;

＆＃13;

div.div1 {
  background-color: #F1F1F1;
  border: 1px solid #CCCCCC;
  padding: 10px;
  overflow: auto;
}

div.div2 {
  background-color: #e2d8ba;
  border: 1px solid #000000;
  padding: 10px;
  text-align: justify;
  overflow: auto;
}

＆＃13;

Answer 2

当您float元素时，您remove it from the normal flow of the document。如果您希望父级扩展以适合浮动元素的高度，则需要实现“clearfix”以“清除”浮动。你可以在这里阅读所有关于花车的信息 - https://css-tricks.com/all-about-floats/

有许多清除浮动的技术，所以我添加了一个作为.clearfix类，你可以在任何有浮动子项的父类上使用它。

<style>
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  div.div1 {
    background-color: #F1F1F1;
    border: 1px solid #CCCCCC;
    padding: 10px;
  }
  div.div2 {
    background-color: #e2d8ba;
    border: 1px solid #000000;
    padding: 10px;
    text-align: justify;
  }
</style>
<div class="div1">
  <div class="div2 clearfix">
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818" style="float:right; padding-left: 10px;"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div>
</div>

Answer 3

/*CSS*/
div.div2 {
    overflow: auto;
}

/*OR*/
div.div2 {
    display: inline-block;
    width: 100%;
}

Answer 4

在众多选项中，一个是使用属性display: table。

关于这个问题：

div不会延伸到图像结束的位置

如果父元素显示为table，则会根据子元素将其呈现为表和 scale 。

以下示例代码段：

＆＃13;

div {
  padding: 10px;
  display: table;
}

div.div1 {
  background-color: #F1F1F1;
  border: 1px solid #CCCCCC;
}

div.div2 {
  background-color: #e2d8ba;
  border: 1px solid #000000;
  text-align: justify;
}

div.div2>img {
  float: right;
  padding-left: 10px;
}

＆＃13;

<div class="div1">
  <div class="div2">
    <img src="http://www.dailyrecoverymeditations.com/forums/image.php?u=2057&dateline=1404850818"> Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing Text Testing</div>
</div>

＆＃13;

CSS div扩展到适合图像

4 个答案: