0

ここでも、float：leftプロパティにいくつか問題があります。私は3つの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>

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

3 に答える 3

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 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;
}
于 2013-03-25T04:48:38.037 に答える
0

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

FOR MAKE DIV IN QUE WISE LIKE（最初のsomting、2番目のco re、3番目のid ea）.visual_text_holder {font-family： "Times New Roman"; font-size：7.5em; text-transform：uppercase; 行の高さ：60％; 幅：140px; float：right; } #holder {width：615px; float：left; }

<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 に答える