3

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

具体来说，我正在尝试复制 37signal 的首页，但我不知道如何排列 3 个 div。

http://37signals.com/

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

<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 复制了你的代码，我得到了一个非常奇怪的效果 - > http://gyazo.com/dfdded3b2304aec9eb1d00a82fef48fd

非常感谢你的帮助！

4

2 回答 2

2

你想给你的容器来保存你的元素text-align:center;

然后你会想要给你的内部元素：display:inline-block;

这是我为你准备的一个例子。

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}

更新：添加图像。

于 2013-11-14T19:10:56.987 回答
1

永远记住，inline 用于将东西并排放置，inline-block 用于将东西并排放置，但容器将保留其块属性，即它们将具有特定的宽度和高度，这与宽度和高度取决于的内联容器不同关于他们的内容。块永远不会并排放置东西，它总是一个在另一个之下。这些是 css 的基本规则，你玩得越多，你就会越了解它:)

于 2013-11-14T19:35:53.350 回答