3

真ん中にある 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 に答える