Question

以下是我的问题图片：

Screenshot of rendered page http://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png

我的第一个错误是横幅与“网页设计”div之间存在大量空白空间。我的第二个错误是“Web开发”div应该在“网页设计”div旁边。这些div的宽度都指定为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;
}

Answer 1

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

此外，您应该float元素，以便它们可以一起显示。

Answer 2

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

Answer 3

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

spannerdiv 上的float只会使 it 浮动，并且不会在 eyediv 旁边放置，当它浮动到具有position: relative的第一个父div。

我建议做其他事情，以便将两个div排列在一起。在父div中包装您想要对齐的div（在本例中为eyediv和spannerdiv），并使用CSS为子div 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放置在您需要的任何位置。

希望有所帮助

CSS：Div不会定位

3 个答案: