Question

Htllo，

我有一个特定的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样式，它看起来像：

what i want

但我不知道该如何开始。你能简单地告诉我如何处理这个问题，或者简单介绍一下这样的东西吗？

由于

Answer 1

尝试这样的事情： http://jsfiddle.net/Hac8G/2/

.item-detail {width:100%;} 
.left {float:left; width:75%;} 
.right> {float:right; width:25%; }

<div class="item-detail">
 <div class="title">
    LOREM IPSUM
</div>

<div class="left">
    left stuff
</div>
<div class="right">
    Right stuff
</div>

</div>

当我看到＆＃34; mockup＆＃34;时，如果需要，你需要一个容器div，一个带有宽度的左右浮动div。在thoose div中你可以安排你的元素。我希望这有帮助

Answer 2

您应该重写 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 中，您应该使用浮点数来对齐列，如下所示：

.text, .links {
    float: left;
}

.text {
    width: 70%;
}

.links {
    width: 30%;
}

.dropdown {
    width: 100%;
}

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

Answer 3

.item-detail将是白板绘图中较大的矩形，这是容器。 .title，是标题，因为它在它自己的div中，它将出现在它自己的行上（就像在白板图中一样）。 .info和.links，因为它们是块级（如标题），将叠加在一起，你需要做的是覆盖这种行为。要做到这一点，请将.info和.links浮动到左侧，然后如果要填充.item-detail，请使用宽度。

.info, .links{
     float: left;
}

如何使用css创建项目详细信息视图

3 个答案: