Question

我再次对float：left属性有一些问题。我有三个div。我希望将“holder”浮动到第一个div的左侧，但它可以使用我的代码。

这是我的代码： HTML

<div id="investments">
   <div class="visual_text_holder"><p>co</p><p>re</p></div>

   <div id="holder">
       <h4>SOMETHING</h4>
   </div>

   <div class="visual_text_holder"><p>id</p><p>ea</p></div>


</div>

AND CSS：

#investments{
    margin: 0 auto;
    margin-top:40px;
    width: 910px;
}

.visual_text_holder {
    font-family: "Times New Roman";
    font-size:7.5em;
    text-transform:uppercase;
    line-height:60%;
    width:140px;
}
#investments:after {
    content: '';
    display: block;
    visibility: invisible;
    clear: both;
}
#holder {
    width:700px;
    float:left;
}

Answer 1

.visual_text_holder { display: inline-block }

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

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

因此，块元素（默认为＆lt; div＆gt;）不会包裹float。

Answer 2

我希望这会对你有所帮助。

JS FIDDLE： http://jsfiddle.net/9ZWLP/

HTML：

<div id="investments">
   <div class="visual_text_holder"><p>co</p><p>re</p></div>

    <div class="holder">
        <h4>SOMETHING</h4>
    </div>

    <div class="clearer" ></div>

    <div class="visual_text_holder"><p>id</p><p>ea</p></div>


</div>

CSS：

#investments{
    margin: 0 auto;
    margin-top:40px;
    width: 910px;
}

.visual_text_holder{
    font-family: "Times New Roman";
    font-size:7.5em;
    text-transform:uppercase;
    line-height:60%;
    width:140px;
    float:left;
}

.holder{
    width:700px;
    float:left;
}

.clearer{
    clear:both;
}

Answer 3

FOR WITHOU改变CSS代码中的HTML代码更改

.visual_text_holder {
  font-family: "Times New Roman";
  font-size:7.5em;
  text-transform:uppercase;
  line-height:60%;
  width:140px; float:right;
}
#holder {
  width:615px;
  float:left;
}

让你在QUE WISE中做出决定（第一次出现，第二次出现，第三次出现） .visual_text_holder { font-family：“Times New Roman”; 字体大小：7.5em; 文本转换：大写; 行高：60％; 宽度：140px;浮动：权利; } #holder { 宽度：615px; 向左飘浮; }

<div id="investments">
<div class="visual_text_holder"><p>id</p><p>ea</p></div>
<div class="visual_text_holder"><p>co</p><p>re</p></div>

<div id="holder">
<h4>SOMETHING</h4>

浮左问题

3 个答案: