1

ラララル、私は 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 が 2 番目の div の上にあることです。最長の「li」タグを削除すると、div 全体が適切に配置されます (内部の 2 つの div が隣り合っています)。通常のように「li」ラップしない理由がわかりません.2つのdivをインラインブロックとして、それらは互いに隣り合っており、垂直に積み重ねられていません。

お知らせ下さい。ありがとうございました！

4

5 に答える 5

2

コンテンツを表の中に入れてみてください。

それは私のために働いた。

于 2011-06-09T00:33:42.223 に答える
0

もう 1 つの方法は、2 つの div をコンテナーにドロップし、マージンを使用して必要な場所にテキストを配置することです。

例：

<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 を無視することを意味し、ボーナスが追加されます。右側に何か他のものが必要な場合は、そこに浮かせて、コンテンツ div の余白を編集して収まるようにすることができます。

于 2009-10-21T08:13:09.847 に答える
0

完璧な 2 列の CSS レイアウト (およびその他の多数) を含むリソースを次に示します。

于 2009-10-21T04:40:16.623 に答える
0

どうぞ：

<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; が宣言されている場合、幅は280px になります）。また、これらのフロート列の下に配置されるものには、clear:both css プロパティが必要です。

于 2009-10-21T04:54:06.693 に答える
0

私はこれのためにフィドルを作成しました - http://jsfiddle.net/vJYxt/

これがうまくいくかどうか教えてください。

于 2012-01-11T03:38:00.143 に答える