0

这是我的问题的图像：

渲染页面截图 http://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png

我的第一个错误是横幅和“网页设计”之间有大量空白div。我的第二个错误是“Web Development”div应该在“Web Design”旁边div。这些divs 的宽度都指定为 23%，我尝试使用该float属性，但这也不起作用。

HTML：

<div id="maininfo">
    <div id="eyediv">
        <li><a class="eye"></a></li>
        <h1>Web Design</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
        <button type="button">SEE MORE</button>
    </div>

    <div id="spannerdiv">
        <li><a class="spanner"></a></li>
        <h1>Web Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
        <button type="button">SEE MORE</button>
    </div>

CSS： 

#maininfo {
    clear: both;
}

#maininfo li {
    list-style: none;
}

#eyediv {
    margin-left: 15%;
    width: 23%;
}

#spannerdiv {
    width: 23%;
    padding-left: 3px;
    float: left;
}
4

3 回答 3

2

正如我在评论中最初提到的那样，clear: both强制元素将显示的“线”放在自己身上，防止其他浮动元素与其对齐。删除该声明应该允许浮动恢复如你所愿。

此外，您应该float让元素一起出现。

于 2012-07-22T14:50:33.230 回答
1

删除clear: both;并应用float: left;

于 2012-07-22T14:49:59.380 回答
0

clear:both;适用于父 div maininfo而不是子 div，所以这应该不是问题。这应该只使maininfo div 有自己的行。

floaton spannerdiv只会让它浮动，并且不需要放置在eyediv 旁边，因为它会浮动到第一个具有position: relative.

我建议做其他事情，以便将两个 div 并排排列。将要对齐的 div（在本例中为 eyediv 和 spannerdiv）包装在父 div 中，并使用 CSS 给子 divs display:inline-block;。而且您还想垂直对齐它们。就像是：

HTML

<div id="wrapperdiv">
    <div id="eyediv">
        <li><a class="eye"></a></li>
        <h1>Web Design</h1>
        <p>Lorem ipsum dolor...</p>
        <button type="button">SEE MORE</button>
    </div>

    <div id="spannerdiv">
        <li><a class="spanner"></a></li>
        <h1>Web Development</h1>
        <p>Lorem ipsum do...</p>
        <button type="button">SEE MORE</button>
    </div>
</div>

CSS

#eyediv {
    margin-left: 15%;
    width: 23%;
}

#spannerdiv {
    width: 23%;
    padding-left: 3px;
    float: left;
}

#eyediv, #spannerdiv {
    display: inline-block;
    vertical-align: top;
}

现在您需要的只是将父 div 放置在您需要的任何位置。

希望能帮助到你

于 2012-07-23T16:04:25.577 回答