如何将div的宽度调整为另一个具有float的左边：left;？

Question

我仍然有问题要很好地理解float属性在CSS中是如何工作的。我道歉，因为我知道这是css基础知识，但我真的想了解这一点并得到一个很好的解释。我已经创建了example来向您展示。 这是我的页面：

我只想调整右侧的第二个div。当我在Chrome开发者工具中查看它时，我看到这个div从窗口的左上角开始，而不是在红色方块之后。我喜欢在红色正方形之后开始正确地改变宽度而不计算正方形的大小并做类似的事情

width = square size + width i want

你知道它是如何发生的以及如何正确调整第二个div的宽度吗？

编辑：solution包括将float属性添加到第二个div。解释如下：浮动元素从流中移除，因此它们不会与非浮动元素堆叠。

Answer 1

你也需要为另一个div设置float。

我们通常如下所示：

HTML

<div class="float-left">
  <p>floated left</p>
</div>

<div class="float-left"><!--- to float next to previous div--->
  <p>floated left</p>
</div>

CSS

.float-left{
  float: left;
}

根据你的评论：

我们确实清除了浮点值，因为容器内容永远不会被折叠。

Answer 2

你需要浮动第二个div。

以下是一个例子。

<div class="parent-div">
  <div class="left">
  </div>
  <div class="left">
    <p>This is the description of the image</p>
  </div>
</div>

Answer 3

您需要设置

p { display:inline; }

或

div { display:inline; }

因为p aragraphs和div s是块元素。

  

http://www.w3.org/TR/CSS2/visuren.html#block-boxes

Answer 4

原因是浮动元素从流中移除，因此它们不与非浮动元素堆叠。 - 因此他们不像以前那样“占用空间”。这就是你的文本div从其容器的左上角开始的原因。

来自MDN的

：https://developer.mozilla.org/en-US/docs/Web/CSS/float

  

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。浮动元素是float的计算值不是none的元素。

Answer 5

您必须为两个DIV设置 float

以下是更新后的代码：

<强> HTML：

<div id="main_container">
    <div class="left"></div>
    <div class="right">
        <p>This is the description of the image <i>Random text</i>

        </p>
    </div>
    <!--Comment below <DIV> to see the result-->
    <div class="clear"></div>
</div>

<强> CSS

#main_container {
    border:5px solid #000;
}
.left, .right {
    width: 100px;
    height: 100px;
    background: red;
    float:left;
}
.right {
    background: blue;
    width: calc(100% - 100px);
}
.clear {
    clear:both;
    margin:0;
    padding:0;
}

另外，只需添加一个与＆＃34; float ＆＃34;相关的重要事实。是，确保你添加＆＃34;清除：两者＆＃34; ＆＃34; float＆＃34;。

之后的财产

为什么？因为基于浮动的布局的一个常见问题是浮点数＆＃39;容器不想伸展以容纳花车。如果你想添加一个所有花车周围的边框（即容器周围的边框），你必须以某种方式命令浏览器一直拉伸容器。

这是相同的小提琴：http://jsfiddle.net/1867ud9p/7/

希望这会有所帮助！