0

485幅の画像の横に説明を表示しようとしていますが、途中でそれを実行しましたが、同じ画像と説明で新しい行を追加しようとすると、次のようになります。

画像
（ソース：gyazo.com）

しかし、まったく同じコード行をコピーして貼り付け、そのdivにmargin-topを追加すると、または<br />それらの間にスペースができなくなると、現在のように見えます。

img2
（ソース：gyazo.com）

何が原因ですか？とても興味深い..

私はtwitterブートストラップフレームワークを使用しています。コード：

<body>
<div class="container">
  <div class="works">
  <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
     </div>
<br />
       <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
     </div>
    
  </div>
</div>
<br />
</body>

CSS

.name-col {
color: #d3d3d3;
}

.title-col {
color: #b2b2b2;
float: left;
position: relative;
top: 7px;
}


.field2 {
margin-top: 50px;
}

.works {
margin-top: 10%;
}
.examplefloat {
float: left;
border: solid 1px #000;
margin-left: 50px;
}

.tag_webdesign {
  background-image: url("../img/web-design.png");
width: 89px;
height: 37px;
float: left;
}

.work1 {
float: left;
}

ライブプレビュー：

http://justxp.plutohost.net/themetheory/portfolio.html

その問題の原因は何ですか？

ありがとう

4

4 に答える 4

2

このルールを CSS に追加します

.field1 {
    margin-bottom: 30px;
    overflow: hidden;
}

これにより、コンテナー内のフローティング要素がクリアされ、その下部に.field1のマージンが適用されます。30px

于 2012-11-01T14:50:28.037 に答える
0

</div>とペアになる端を見つけます<div class="works">

その終わりの上に追加します</div>：

<div style="clear:both"></div>

このように見えるはずです................。

<body>
<div class="container">
  <div class="works">
  <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
         <div style="clear:both></div> //MY ADDITION
     </div>
<br />
       <div class="field1">
     <div class="work1">
        <span class="title-col">Client: <span class="name-col">Joshua</span></span><br />
        <span class="title-col">Description: <span class="name-col">A suavely, asthetic, betting website based <br />off of the widely expanding MOBA game League of Legends.<br />
It was a great honor doing this design, gaming  <br />websites are always fun!</a>
<br />
   <br />
<span class="title-col">Category:</span> <div class="tag_webdesign"></div>
     </div>
         <img class="examplefloat" src="img/p1.png"/>
         <div style="clear:both></div> //MY ADDITION
     </div>

  </div>
</div>
<br />
</body>
于 2012-11-01T14:51:11.077 に答える
0

あなたがしたいことはあなたの.field1divでclearfixソリューションを使用することです：https ：//stackoverflow.com/a/1633170/1778054

本質的に、これをCSSに追加します。

/* For modern browsers */
.field1:before,
.field1:after {
    content:"";
    display:table;
}
.field1:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.field1 {
    zoom:1;
}
于 2012-11-01T14:51:16.787 に答える
0

フロートを取る場合：左; .examplefloat（画像で使用）クラスをオフにすると、マージンの問題が修正されます。

于 2012-11-01T14:51:31.193 に答える