0

我再次对 float:left 属性有一些问题。我有三个div。我想将“持有人”浮动到第一个 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>

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

3 回答 3

0

无需更改 HTML 代码更改如下 CSS

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

FOR MAKE DIV IN QUE WISE LIKE (first somting, second core, third id ea) .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>

于 2013-03-26T12:05:05.363 回答
0 
.visual_text_holder { display: inline-block }

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

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

因此，块元素（默认情况下是 <div>）不会环绕float.

于 2013-03-25T04:43:26.503 回答
0

我希望这能帮到您。

JS 小提琴：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;
}
于 2013-03-25T04:48:38.037 回答