Question

我一直在网站上工作，但我遇到了一个问题。

我的div将无法正确对齐事件，新闻和三个中间描述...这是代码。（对不起，如果它非常混乱......我现在正在努力。）它不会让我发布EVENTS＆amp;的代码。新闻所以请耐心等待。

三个描述div。

<div class="mainall">

 <div class="descc1">
 <div class="deschead1"></div>
 <div class="thumb1"></div>
 <div class="head1"></div>
 <div class="headbg1"></div>
 <div class="descsep1"></div>
 <div class="desc1">
     <p></p>
 </div>
 </div>

 <div class="descc2">
 <div class="deschead2"></div>
 <div class="thumb2"></div>
 <div class="head2"></div>
 <div class="headbg2"></div>
 <div class="descsep2"></div>
 <div class="desc2">
     <p></p>
 </div>
 </div>

 <div class="descc3">
 <div class="deschead3"></div>
 <div class="thumb3"></div>
 <div class="head3"></div>
 <div class="headbg3"></div>
 <div class="descsep3"></div>
 <div class="desc3">
     <p></p>
 </div>
 </div>
</div>

CSS - http://pastebin.com/HPSikFjM

Mainall =

.mainall {
 display: block;
 margin-top: 25px;
 overflow: hidden; }

Answer 1

好的，我想我明白你要做什么了。您需要将每个列浮动，然后为最后一个元素添加一个明确的修复。

<div id="outside-div-that-expands-to-full-avaliable-size">
   <div class="third">First</div>
   <div class="third">Second</div>
   <div class="third">Third</div>
   <div class="clear"></div>
</div>

使用css

.clear { clear:both; }

这是你想要的效果吗？ http://jsfiddle.net/HPY2X/1/

Answer 2

这非常有效 - 我在您的实际网站上进行了测试：

<强> CSS：

.descc1{
margin-right: 2.1275%;
float: left;
margin-top: 10px;
width: 31.914893617021%;
}

.descc2 {
float: left;
margin-top: 10px;
width: 31.914893617021%;
margin-right: 2.127659574468%;
}

.descc3 {
float: left;
margin-top: 10px;
width: 31.914893617021%;
}

.mainbox {
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
float: left;
width: 100%;
}

我的div将无法正确对齐

2 个答案: