html - 如何使用CSS创建元素细节 View

Question

你好，

我有一个特定的 div 树:

<div class="item-detail">
    <div class="title">
        TITLE
    </div>
    <div class="info">
        <h1>LOREM IPSUM</h1>
        Lorem ipsum
    </div>
    <div class="links">
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
    </div>
</div>

我正在尝试为该 div 制作一个 css 样式，它看起来像:

但我不知道我应该如何开始。您能否简要地告诉我如何处理该问题，或者举一个类似的简短示例？

谢谢

Answer 1

您应该稍微重写您的 HTML。像这样:

<div class="item-detail">
    <div class="title">
        TITLE
    </div>
    <div class="info">
       <h1>LOREM IPSUM</h1>
        <p>Lorem ipsum</p>
    </div>
    <div class="links">
        <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
         </select>
         <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
        </select>
        <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
        </select>
    </div>
</div>

在 CSS 中，您应该使用 float 来对齐列，如下所示:

.text, .links {
    float: left;
}

.text {
    width: 70%;
}

.links {
    width: 30%;
}

.dropdown {
    width: 100%;
}

JSFIDDLE:http://jsfiddle.net/UU6Xp/