您将如何设置该DIV布局（左对齐div左对齐，右对齐div右对齐）？

Question

I'm trying to have 2 seperate DIV's, one with Right aligned content (the labels) and the other div with Left aligned content (the content for each label).

I am hoping to make each label "connected" with it's child content on the right so that if it gets pushed down by content from above they will still remain together.

What would be the best way to approach setting this type of layout that is cross-browser? (I have provided in a JPG below).

Answer 1

The alignment is going to be tricky if you actually have the right aligned content in that separate div, especially if the content is variable in nature and the height is prone to change.

Very basically, here is what I would do just so that the right hand features always line up with their associated left hand content. You're obviously going to have to tweak it to your taste.

CSS:

ul {
    list-style: none outside none;
    margin-left: 150px;
}

ul li h3{
    position: absolute;
}

ul li span {
    position: relative;
    display: block;
    width: 150px;
    text-align: right;
    left: -150px;
}

HTML:

<ul>
    <li>
        <h3><span>Feature 1</span></h3>
        <p>Content 1<br />Content 1</p>
    </li>
    <li>
        <h3><span>Feature 2</span></h3>
        <p>Content 2<br />Content 2</p>
    </li>
</ul>

I literally just threw this into an empty file just to make sure it works. I know it's not exactly what you asked for, but maybe it will give you some ideas.

As I'm being accused of providing an overkill solution, here's a simpler one just using floats:

CSS:

.left, .right {
    float: left;
}

.left {
    clear: left;
    width: 150px;
    text-align: right;
}

HTML:

<div class="left">feature</div>
<div class="right">content<br />content</div>

<div class="left">feature</div>
<div class="right">content<br />content</div>

Answer 2

This is semantically a table, and is an appropriate use for the HTML table layout. While it's important to move away from the use of tables for non-tabular layout, a table is still a table, no matter how few rows or columns. A table with two columns and lots of rows is very prevalent in the real world.

Answer 3

似乎您也可以使div中的类在父元素中向左或向右对齐。