gpt4 book ai didi

css - 结合固定元件和流体元件 - 无工作台

转载 作者:行者123 更新时间:2023-12-02 04:33:54 24 4
gpt4 key购买 nike

我想结合固定元素和流体元素。与<table>这很简单,但我想要无 table

table :<强>http://jsfiddle.net/Tam7z/

但是,如何在没有表格的情况下仅使用 divs 来做到这一点?和CSS

HTML:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="80" class="a">FIXED</td>
<td class="b">FLUID</td>
</tr>
</table>

CSS:

table { background: #f4f4f4 }
.a { background: #CCC }
.b { background: #999 }

/* */
* { font-family: sans-serif }
td { padding: 5px }
p { color: #CCC; font-style: italic; margin-top: 40px; font-weight: 100 }

image

最佳答案

像这样:http://jsfiddle.net/NicoO/Tam7z/1/

这是一种非常简单的布局方式。但默认情况下,两个元素的高度可能不同。此外,您不能垂直对齐此元素内部的元素。您应该对主体或父项使用min-width,以防止流体 div 变得太小。

#left
{
float: left;
width: 150px;
background-color: lightgray;
}

#right
{
margin-left: 150px;
background-color: gray;
}

HTML

<div id="left">Fixed</div>
<div id="right">Fluid</div>

关于css - 结合固定元件和流体元件 - 无工作台,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22428261/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com