css - 和CSS 列内部没有正确换行

Question

Lalalal，我对 CSS 快疯了……

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

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

干得好：

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

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

Answer 3

Another method would be to drop your 2 divs in a container, then use margin to position the text where needed.

Example:

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

with css:

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

This simply means the content div ignores the link div to the left, with the added bonus, that if you need something else on the right hand side you can simply float it there and edit the margins of the conent div to allow it to fit.

Answer 4

这是具有完美 2column CSS 布局（以及其他一些）的资源 通常，您必须正确浮动

Answer 5

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

让我知道这是否适合您。