怎么用div设计一行两个列框出来

wuyuwww 2013-03-13 09:37:10

第一行是header 横向排列
第二行是分两列，左右两列
第三行是footer

谢谢啦

我真的不会

...全文

393 24 打赏收藏转发到动态举报

写回复

用AI写文章

24 条回复

切换为时间正序

请发表友善的回复…

发表回复

u010074327 2013-05-11

打赏
举报

浮动窗口解决

dlalcymy 2013-05-10

打赏
举报

引用 13 楼 Doing93 的回复:

<html>
<head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div.container{
			width: 600px;
			border:1px solid #000000;
		}
		div.header,div.footer{
			text-align: center;
			color:white;
			background-color:gray;
		}

		div.sideBar{
			float: left;
			padding: 1em;
			width: 160px;
		}

		div.content{
			margin-left: 190px;
			padding: 1em;
			border-left: 1px solid #000000;
		}


	</style>
</head>

<body>
	<div class="container">
		<div class="header"><h1>This is header</h1></div>
		
		<div class="body">
			<div class="sideBar"><p>This is sideBar.</p></div>
			<div class="content"><p>This is content.</p></div>
		</div>
		
		<div class="footer">This is footer</div>
	</div>
</body>
</html>
这是我自己写的你看一下吧用表格布局已经过时了，不用表格一行分两列的效果用的是float属性。用了float属性设置的标签就相当于脱离文档，所以那个第二列需要设置左边距，否则会和第一列重合在一起，因为在它看来那儿是没有元素的。你结合代码和实际效果看一下，希望能对你有帮助

写的不错，但是div.class这样类似的选择器还是不要这么写

乌哩码嗏 2013-05-06

打赏
举报

就是用float:left吖，最实际的啦

缨络-玺 2013-05-05

打赏
举报

float:left;就会自动横排。普科国际留。

缨络-玺 2013-05-05

打赏
举报

就用float：left；就会自动向左排。普科国际留。

kinghome 2013-04-28

打赏
举报

建议楼主先把 CSS 基础打好

shily_fly 2013-04-28

打赏
举报

13楼 Doing93 写的很规范哦，值得学习

苹果没有皮 2013-04-25

打赏
举报

引用 10 楼 wuyuwww 的回复:

感谢楼上的实例可是我不知道为啥你的里面的 *display与display的区别和联系

*是兼容ie用的哦

艾小仙 2013-03-15

打赏
举报

引用 10 楼 wuyuwww 的回复:

感谢楼上的实例可是我不知道为啥你的里面的 *display与display的区别和联系

看看hack就好了，貌似IE67能识别*还有_ 但是ff不认识

miss_芙蓉 2013-03-15

打赏
举报

楼上写的很规则，给力

jrmagic 2013-03-15

打赏
举报

引用 13 楼 Doing93 的回复:

XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546<html><head> <style type="text/css"> *{ margin: 0; padding……

Doing93 2013-03-14

打赏
举报

<html>

<head>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		div.container{

			width: 600px;

			border:1px solid #000000;

		}

		div.header,div.footer{

			text-align: center;

			color:white;

			background-color:gray;

		}



		div.sideBar{

			float: left;

			padding: 1em;

			width: 160px;

		}



		div.content{

			margin-left: 190px;

			padding: 1em;

			border-left: 1px solid #000000;

		}





	</style>

</head>



<body>

	<div class="container">

		<div class="header"><h1>This is header</h1></div>

		

		<div class="body">

			<div class="sideBar"><p>This is sideBar.</p></div>

			<div class="content"><p>This is content.</p></div>

		</div>

		

		<div class="footer">This is footer</div>

	</div>

</body>

</html>

这是我自己写的你看一下吧用表格布局已经过时了，不用表格一行分两列的效果用的是float属性。用了float属性设置的标签就相当于脱离文档，所以那个第二列需要设置左边距，否则会和第一列重合在一起，因为在它看来那儿是没有元素的。你结合代码和实际效果看一下，希望能对你有帮助

苹果没有皮 2013-03-14

打赏
举报

可以用inline-block啊

<div>
            <div class="header">1111111111</div>
            <div class="content">
                <div class="leftContent">222222222222</div>
                <div class="rightContent">333333333333</div>
            </div>
            <div class="footer">44444444444</div>
        </div>

.leftContent{
               border: 1px solid;
               display: inline-block;
               *display: inline;
               zoom: 1;
               width: 100px;
               height: 300px;
           }
           .rightContent{
               border: 1px solid;
               display: inline-block;
               *display: inline;
               zoom: 1;
               width: 100px;
               height: 300px;
           }

angellongyun 2013-03-14

打赏
举报

</head> <style type="text/css"> div ul li{ margin:0; padding:0; } .body{ width:960px; margin:0 auto;} </style> <body> <div class="body"> <div> <img src="" /> </div> <div style="width:480px; float:left"> </div> <div style="width:480px; float:left"> </div> </div> </body>这样应该是可以了，我是刚学的不好意思没有更好的方法

wuyuwww 2013-03-14