Question

我试图将我的风格从使用表格转移到控制格式，但我还没有看到一个简单的css解决方案与

完全相同

<table><tr><td>aribitrary-html-A</td><td>aribitrary-html-B</td></tr><table>

我想要的是确保aribitrary-html-A和aribitrary-html-B水平对齐。我使用display: inline，clear: none和float: left尝试了各种CSS混合，但它们都有不必要的副作用，即移动我的内容，而 table-tr 解决方案只是做我想要的，不管任意HTML中的内容是什么，无论HTML包含我的表格是什么。

我错过了什么吗？

Answer 1

为什么不使用像960gs

这样的网格系统

Answer 2

你可能需要这个

<div id="wrap">
    <div id="left">
        content 1
    </div>
    <div id="right">
        content 1
    </div>
</div>


#wrap {
    width: 50%; /* change this as you wish */
}

#left, #right {
    display: block;
    float: left;
}

Answer 3

只需创建两个Div并在左侧对齐您想要的那个。

像这样（更新）：

<div id="wrap" style="  width:300px; 
                          margin:auto;                      
                        border: 1px solid black; 
                        padding:1px">
    <div id ="A" style="float:left; 
                        border: 1px solid black;"> aribitrary-html-A </div>

    <div id = "B" style="border: 1px solid black;"> aribitrary-html-A</div>
</div>

更新：我添加了一个定义宽度的包装器。我还使用了一些边框来可视化表格般的布局。希望有所帮助。

Answer 4

你需要使用<div>和体面的CSS。对于那些没有足够自信（或像我一样懒惰）的人来说，Yahoos YUI CSS Grid Builder是非常宝贵的！享受！

Answer 5

也许这对你有帮助吗？

    <div style="width:400px;margin:0 auto;">
        <div style="background-color:red;float:left;height:200px;width:200px;">

        </div>
        <div style="background-color:blue;float:right;height:200px;width:200px;">

        </div>
    </div>

请不要像我一样把你的css放在样式属性中。

Answer 6

将div中的元素换行，为包装器设置固定宽度。给div中的每个元素一个宽度，并将margin设置为0 auto。

Answer 7

只需在要水平显示的每个元素上将CSS“float”属性设置为左侧，并确保每个元素都具有设置的宽度。

css相当于table-row

7 个答案: