Question

Lalalal，我对CSS感到疯狂......

我无法在这里实现最简单的布局，有些东西正在破碎。我想要彼此相邻的两列：

[**** 300px ****][******** 500 px ********]

                  2nd column heading
Some text..       - 1st bullet point text
                  - 2nd bullet...
                  - 3rd...
                  -------------------------

我有这些div：

<div class="faq_item">
        <div class="faq_link">
            <a href="">Video/screenshot coming soon.. </a>
        </div>
        <div>
            <strong>Q: How to add an item to a group? </strong>
            <ul>
            <li> Place your finger on one of the four icons at the bottom toolbar.</li>
            <li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
            <li> Release your finger.</li>
            <li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
            </ul>
        </div>
        <hr/>
    </div>

CSS：

    .faq_item strong {
    display:block;
    margin-bottom: 10px;
}
.faq_item span {
    display: block;
}
.faq_item {
    margin:0 0 30px 50px;
}
.faq_item div {
    display:inline-block;
}
.faq_link {
    width:300px;
}
div.faq_item hr {
    width:500px;
    float:right;
    clear:left;
}

我的问题是，当代码在它时，第一个div位于第二个div的顶部。一旦我消除了最长的“li”标签，整个div就会正确对齐（内部的2个div彼此相邻）。我不明白为什么“li”不应该正常包装，并且使用2个div作为内联块，它们应该彼此相邻而不是垂直堆叠。

请指教。谢谢！

Answer 1

尝试将您的内容放入表格中。

它为我工作。

Answer 2

Here's resource具有完美的2列CSS布局（以及其他一些）通常，您必须正确浮动

Answer 3

你走了：

<style type="text/css">

.wrapper {
    width:800px;
    margin:0;
    padding:0;
}

.faq-link {
    width:300px;
    background:#DDD;
}

.faq-list {
    width:500px;
}

.left {
    float:left;
}

.right {
    float:right;
}

</style>

<div class="wrapper">
    <div class="left faq-link">
        <a href="">Video/screenshot coming soon.. </a>
    </div>
    <div class="right faq-list">
        <strong>Q: How to add an item to a group? </strong>
        <ul>
            <li> Place your finger on one of the four icons at the bottom toolbar.</li>
            <li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
            <li> Release your finger.</li>
            <li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
        </ul>
    </div>
</div>

这里有几个陷阱。填充将拧紧一切，所以你必须在填充类中考虑它（即填充：0 10px;总宽度增加20个像素，所以如果.faq-link有填充：0 10px;声明，宽度将是280px）。此外，放置在这些浮动列下方的任何内容都需要清除：两个css属性。

Answer 4

另一种方法是将2个div放在容器中，然后使用margin将文本放在需要的位置。

示例：

<div class="faq_container">
  <div class="faq_link">
    ...
  </div>
  <div class="faq_item">
    ...
  </div>
</div>

用css：

.faq_container{
width:800px;
}
.faq_item{
width:800px;
margin: 0 0 30px 350px;
}
.faq_link {
width:300px;
float: left;
}

这只是意味着内容div忽略左边的链接div，加上额外的奖励，如果你需要在右边的其他东西，你可以简单地将它漂浮在那里并编辑conent div的边距以允许它适合。

Answer 5

我为此创造了一个小提琴 - http://jsfiddle.net/vJYxt/

请告诉我这是否适合您。

CSS列内的<li> <li>未正确包装</li> </ul>

5 个答案: