如何使用HTML + CSS获取以下布局:
| |x| |
| |x| |
所有三列(两列和分隔符)都应该接触,即它们的背景颜色必须接触而没有任何间隙.
我创建这样的布局的问题是我希望"分隔符"的宽度以em(即基于字体宽度)测量,而主要内容列则适合包含元素的其余宽度(即约50%) .我希望保留此布局,而不会在字体大小上独立地覆盖左侧或右侧内容列(即,如果我增加或减少字体宽度,则应保留布局).
请注意,此布局位于其他容器内,并且可以在页面中重复这些容器.因此,我无法使用任何绝对定位解决方案.
容器也不应使用固定宽度:将其视为具有width: 100%;或width: auto;(或未设置宽度)的容器.
如果可以在缺少左列或右列(即空列)的情况下创建布局,则可以获得奖励积分.
一种可能性:
HTML:
<div class="container">
<div> Column A </div>
<div> Column B </div>
</div>
CSS:
.container {
overflow: auto;
}
.container > * {
float: left;
width: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container > :first-child {
border-right: 0.5em solid COLOR;
}
.container > :last-child {
border-left: 0.5em solid COLOR;
}
其中COLOR是分隔符列的背景颜色的颜色.
现场演示: http ://jsfiddle.net/3XHSu/show/
使用inline-blocks,您可以创建许多不同的非平凡布局.
我做了两个例子,第一个例子,人为的等高:http://jsfiddle.net/kizu/nMWcG/
第二个变种,带有物理间隙分隔符:http://jsfiddle.net/kizu/nMWcG/5/
它们有些不同(并且可能有更多基于inline-block解决问题的s的布局),希望其中至少有一个适合你:)
整个想法是使用white-space: nowrapon包装器,因此如果它们的宽度之和大于包装器,则列不会掉落,然后在包装器上添加一个填充,其width: auto间距等于所需的间隙.
如果您只需要一列,则可以将其中一列清空(不带.column-content),或删除它们并在其上添加一个额外的类.嗯,这取决于你希望孤独的列如何表现等.
您始终可以使用绝对定位,但您也需要定位共同的祖先(relative).使用浮动可以最好地完成灵活的多列布局:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Test Case: 2-Column Layout with Separator</title>
<style type="text/css">
.container {
position: relative;
float: left;
background-color: green;
}
.container .left {
float: left;
width: 50%;
background-color: red;
}
.container .left .padding {
margin-right: 5em;
}
.container .right {
float: right;
width: 50%;
background-color: fuchsia;
}
.container .right .padding {
margin-left: 5em;
}
.container .separator {
position: absolute;
left: 50%;
top: 0;
width: 10em;
height: 100%;
margin-left: -5em;
background-color: blue;
}
div.clearBoth {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}
</style>
</head>
<body>
<h1>CSS Test Case: 2-Column Layout with Separator</h1>
<div class="container">
<div class="left">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit.
</div>
</div>
<div class="right">
<div class="padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla dolor, tempor ac sollicitudin malesuada, tempus in metus. Nulla eget augue ut velit ullamcorper aliquam. Aliquam in nibh eu arcu tincidunt eleifend et ac justo. Donec mauris orci, tristique et ornare quis, dictum a ante. Suspendisse rhoncus commodo ligula, ac mattis eros dignissim vitae. Morbi pulvinar ultrices aliquam. Praesent tempus velit justo, eget fringilla leo. Aliquam fringilla risus eget justo ornare pellentesque. Duis ullamcorper scelerisque mauris vitae blandit. Morbi et bibendum orci. Sed vestibulum posuere nisi, vitae rhoncus mi laoreet in. Quisque commodo porttitor risus, id ullamcorper libero gravida at. Donec interdum accumsan blandit. Vestibulum ac eros et nisl fermentum cursus. Integer vitae ornare orci. Vestibulum facilisis adipiscing metus a suscipit.
</div>
</div>
<div class="separator"></div>
</div>
<div class="clearBoth"><!-- clear --></div>
</body>
</html>
请注意
display: none左列,右列或两者,它都有效.因此,如果标记中缺少左列,右列或两者,则它可以工作;由于后者,它也应该适用于所有支持CSS2的浏览器,因为它不依赖于任何特定于UA的实现.我在以下浏览器中测试了这个积极因素:
它并没有工作在:
说明:
width加水平填充.因此,任何(水平)填充必须由子元素创建.margin-right和margin-left为孩子(DIV)左,右列的一半内的元素width的分离器(的5em分别). 如果不再涉及padding-right,padding-left也可能会有效width.absolute左列和右列之间,必须定位容器relative.分隔符具有负边距(margin-left: -5em),以便其框width: 10em从中间(left: 50%)向左移动一半.float: left使其为分隔符提供堆叠上下文,以显示在列的顶部(并始终具有正确的宽度).因此,您需要clear: left在clear: both容器之前和之后(后者DIV在这里使用零高度元素).注意事项:
overflow或overflow-x值visible以防止这种情况发生.更新:现在验证为HTML 4.01 Strict和CSS2; 清除BR为子BODY,而magenta颜色名称分别没有.此外,该position属性是与CSS2一起引入的.
小智 3
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xml:lang="en">
<head> <title>CASH REGISTER</title>
<style type="text/css">
@media all {
body { margin:0 ; padding:0 ; background:#000000 ; color:white }
div { margin:0 ; padding:0 ; font-size:2em }
}
</style >
</head>
<body>
<div style="background-color: #888 ; width: 51em">
<div style="background-color:red;float:left;width:25em">1</div>
<div style="background-color:green;float:left;width:1em">2</div>
<div style="background-color:blue;float:left;width:25em">3</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
3936 次 |
| 最近记录： |