0

我试图在 485 宽的图片旁边获得描述，我是按照自己的方式进行的，但是当尝试添加具有相同图片和描述的新行时，如下所示：

图片
（来源：gyazo.com）

但是当我复制并粘贴完全相同的代码行并将 margin-top 添加到该 div 时，甚至<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

您想要做的是在您的 .field1 div 上使用 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 回答