Question

我试图在485宽幅图片旁边找到描述，我是按照我的方式做的，但是在尝试使用相同的图片和描述添加新行时：

images http://gyazo.com/7395b2748a947cdab0247b485bc391b5.png

但是当我复制并粘贴完全相同的代码行并向该div添加margin-top，甚至<br />时，它们之间不会留下任何空格，这就是它现在的样子：

img2 http://gyazo.com/83bd43135137d7e33c9b2074645fe43e.png

是什么造成的？非常有趣..

我正在使用twitter bootstrap框架。代码：

<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

导致这个问题的原因是什么？

由于

Answer 1

将此规则添加到CSS

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

这将清除.field1容器中的浮动元素，并在其底部应用30px的边距。

Answer 2

找到与</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>

Answer 3

您要做的是在.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;
}

Answer 4

如果你采取浮动：左;关闭.examplefloat（在图像上使用）类，它将修复边距问题。

即使没有margin-top和<br/>，区域也不会向下移动

4 个答案: