Question

编辑 - 在做了一些研究之后，我偶然发现了这个链接http://snook.ca/archives/html_and_css/getting_your_di，因为任何像我一样难倒的人试图让div表现得像桌子一样。

我希望文本与中心线并排。我将左列左右列向左浮动。我在右栏上使用了清晰，它有效，但是它将我的h3推回到左侧，所以我在那边应用了清晰而没有任何东西...... 挠我的头我听到了桌子可能是解决这个问题的最好方法，但我想先尝试用div做这个。我根本没有和桌子一起工作，不知道利弊是什么。

P.S。我可以将绝对定位用于相对父级，而不是使用浮点数来对齐div内的内容。我一直在阅读绝对定位是不赞成/不好的做法，当涉及到铺设东西，但在这种情况下移动内容在桌子上，可能是那么糟糕，如果是这样，为什么？

* {
    padding: 0px;
    margin: 0px;
}
html {
    font-family: 'Source Sans Pro', sans-serif;
    background: #666699;
}
#sections {


    margin: 0 auto;
    width: 1010px;
    height: 400px;
    margin-top: 50px;
    color: #CC6666;
}
#leftSections {
    float: left;
}
#leftSections p,
h3 {


    margin: 15px 15px 0 0;
    float: right;
    clear: both;
}
#rightSections {
    float: right;
}
#rightSections p,
h3 {


    margin: 15px 15px 0 0;
    float: left;
    clear: both;
}
.sectionLfirst {
    width: 500px;
    height: 100px;
    border-top-style: solid;
    border-left-style: solid;
}
.sectionLsecond {
    width: 500px;
    height: 100px;
    border-top-style: solid;
    border-left-style: solid;
}
.sectionLthird {
    width: 500px;
    height: 100px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
.sectionRfirst {
    width: 500px;
    height: 100px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
}
.sectionRsecond {
    width: 500px;
    height: 100px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
}
.sectionRthird {
    width: 500px;
    height: 100px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
}

HTML：

<div id="sections">
<!--LEFT DIV TABLES-->
<div id="leftSections">
    <div class="sectionLfirst">
         <p>EXPERIENCED CENTERA</p>
         <h3 span style="font-weight:bold";>Align to center   lineeeeeeee</h3>
    </div>
    <div class="sectionLsecond">
         <p>EXPERIENCED CENTERA</p>
         <h3 span style="font-weight:bold";>Align to center lineeeeeeee</h3>
    </div>
    <div class="sectionLthird">
         <p>EXPERIENCED CENTERA</p>
         <h3 span style="font-weight:bold";>Align to center lineeeeeeee</h3>
    </div>
</div>
<!--LEFT SECTION COLUMNS-->
<div id="rightSections">
    <div class="sectionRfirst">
         <p>EXPERIENCED CENTERA</p>
         <h3 span style="font-weight:bold";>Align to center lineeeeeeee</h3>
    </div>
    <div class="sectionRsecond">
         <p>EXPERIENCED CENTERA</p>
         <h3 span style="font-weight:bold";>Align to center lineeeeeeee</h3>
    </div>
    <div class="sectionRthird">
         <p>EXPERIENCED CENTERA</p>
         <h3 span style="font-weight:bold";>Align to center lineeeeeeee</h3>
    </div>
</div>

Answer 1

如果你想在不使用表的情况下实现类似于表格的布局，你可以使用css display: table和相关的（table-cell等）

https://developer.mozilla.org/en-US/docs/Web/CSS/display

display：table-cell;

这些元素的行为与HTML元素类似。

使用表格不一定是恶意的 - 如果要显示表格数据，则<table>是合适的。（如果您只想实现相同的布局样式，请查看上面的css）

用div制作一张桌子 - 使用花车浮动文本在中心肩并肩

1 个答案: