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

赫特罗

我有一个特定的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样式，如下所示：

但我不知道该怎么开始。你能简单地告诉我如何处理这个问题，或者举一个这样的例子吗

---

谢谢

。项目详细信息将是白板图形中较大的矩形，这是容器。title，是标题，因为它在自己的div中，所以它将显示在自己的行中（就像白板图形中一样）。信息和.links，因为它们是块级的（像标题一样），将堆叠在彼此的顶部，您需要做的是重写此行为。要做到这一点，请将.info和.links浮动到左侧，然后根据需要调整宽度以填充.item detail

.info, .links{
     float: left;
}

试着这样做：

。项目详细信息{宽度：100%；}
.left{float:left；宽度：75%；}
.right>{float:right；width:25%；}
乱数假文
剩下的东西
正确的东西

正如我看到的“模型”，你需要一个容器div，一个带宽度的左右浮动div，如果你需要的话。在这些div中，您可以安排您的元素。

---

我希望这对你有所帮助，你应该重写一下你的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>

---

JSFIDLE：

更新您的问题及其未解决的问题请分享您迄今为止尝试过的CSS代码。您可以添加一些您尝试过的CSS代码。我还没有尝试过任何东西：（我不知道如何开始…我不需要链接中的select语句，它应该像“只有一个打开的下拉列表”.但是谢谢你helping@VinceCgto将

div.title

置于

div.text

之外，如照片所示，它横跨

div.item-detail

的整个宽度，将其从

div.text

中取出，默认情况下将允许它跨越整个宽度。@AbstractChaos，你是对的。没有太多注意这一点。只是下拉菜单在我看来，它像是常规的下拉列表，而不是手风琴。我不建议你在列中使用“左”和“右”，而是使用更符合逻辑的名称。例如“文本”、“内容”或“文章”和“链接”。

<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>

.text, .links {
    float: left;
}

.text {
    width: 70%;
}

.links {
    width: 30%;
}

.dropdown {
    width: 100%;
}