Question

我正在尝试在中间创建三个元素的水平列表，并且不确定要使用哪个显示属性。我已经对它们进行了全部测试，没有任何内容从垂直变为水平。

具体来说，我试图复制37signal的首页，我无法弄清楚如何排列3个div。

我的标记看起来像这样'：

<section class="imgContainer">
    <ul>
        <img src="logo-bc.png" alt="Basecamp">
        <li class="productTitle">Basecamp&copy;</li>
            <ul>
                <li class="productSubTitle">Manage Projects</li>
                <li class="productDescription">Used by millions for project management.</li>
            </ul>
        <img src="logo-hr.png" alt="Basecamp">
        <li class="productTitle">Highrise&copy;</li>
            <ul>
                <li class="productSubTitle">Manage Contacts</li>
                <li class="productDescription">Know the people you do business with.</li>
            </ul>
        <img src="logo-cf.png" alt="Basecamp">
        <li class="productTitle">Campfire&copy;</li>
            <ul>
                <li class="productSubTitle">Work in Real-Time</li>
                <li class="productDescription">Group chat rooms for your business.</li>
            </ul>
    </ul>
</section>

先谢谢！

编辑：按照说明添加CSS：

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 14, 2013 */

@font-face {
    font-family: 'crimson_textsemibold';
    src: url('crimsontext-semibold-webfont.eot');
    src: url('crimsontext-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('crimsontext-semibold-webfont.woff') format('woff'),
         url('crimsontext-semibold-webfont.ttf') format('truetype'),
         url('crimsontext-semibold-webfont.svg#crimson_textsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}


html {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h1, h2 {
    font-family: "crimson_textsemibold" /*"Crimson Text"*/,"CrimsonSemibold","Times New Roman",Georgia,serif;
}

body {
    set width: 80%;
    margin: 0 auto;
    text-align: center
}

nav ul li a {
    text-decoration: none;
}

header {

}

ul li {
    display: inline;
}

li.productTitle {
    font-size: 2em;
    padding-top: .2em;
}

li.productSubTitle {
    color: red;
    font-weight: bold;
    padding: .6em 0 1em 0;
}

新HTML：

<section id="imgContainer">
        <div class="mainContent">
            <img src="logo-bc.png" alt="Basecamp">
            <p>Basecamp</p>
            <p>Manage Projects</p>
            <p>Used by millions for project Management.</p>
        </div>
        <div class="mainContent">
            <img src="logo-hr.png" alt="Basecamp">
            <p>Highrise</p>
            <p>Manage Contacts</p>
            <p>Know the people you do business with.</p>
        <div class="mainContent">
            <img src="logo-cf.png" alt="Basecamp">
            <p>Campfire</p>
            <p>Work in Real-Time</p>
            <p>Group chat rooms for your business.</p>
        </div>
    </section>

新CSS：

#imgContainer {
    width: 600px;
    height: 1000px;
    background-color: blue;
    text-align: center;
    margin: 0 auto;
}

.mainContent {
    display: inline-block;
    width: 150px;
    height: 200px;
    background-color: green;
    margin-top: 50px;
}

我基本上从JSfiddle复制了你的代码，我得到了一个非常奇怪的效果 - ＆gt; http://gyazo.com/dfdded3b2304aec9eb1d00a82fef48fd

非常感谢你的帮助！

Answer 1

您希望为容纳元素的容器text-align:center;

然后您想要提供内部元素：display:inline-block;

Here's an example I whipped up for you.

HTML：

<div id="container">
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
</div>

CSS：

#container{width:600px;height:1000px;background-color:blue;text-align:center;}
.element{width:150px;height:300px;background-color:red;display:inline-block;margin-top:50px}

更新：添加图片。

Answer 2

永远记住，内联用于保持并排的东西， inline-block用于并排保存东西，但容器将保留其块特性，即它们将具有特定的宽度和高度，而不像内联容器的宽度和高度取决于它们的内容。块永远不会并排存在，它总是一个在另一个之下。这些是css的基本规则，你玩的越多，你就越能理解它：）

display：内联vs内联块vs非块元素的块

2 个答案: