[英]div side by side and float left
eftMy html: eft我的html:
<div id="content_living" >
<div id="leftnav">
//only text href
</div>
<div id="show_pics">
//pics: 1, 2, 3 4, - all href with img
</div>
</div>
My CSS: 我的CSS:
#content_living {
}
#leftnav{
float:left;
width:200px;
padding-left: 20px;
padding-top: 30px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);
}
#show_pics {
padding-top:15px;
padding-bottom: 20px;
overflow: hidden;
padding-left: 10px;
width: auto;
}
What I get: 我得到的是:
href1 | pic1 pic2 pic3
href2 | pic4 pic5 pic6
| pic7 pic8 pic9
| pic10 pic11 pic12
But what I want: 但是我想要的是:
href1 | pic1 pic2 pic3
href2 | pic4 pic5 pic6
| pic7 pic8 pic9 pic10
| pic11 pic12 ...
What do I do wrong? 我做错了什么?
You can try floating your navigation to the left and then just add a padding to your content div. 您可以尝试将导航浮动到左侧,然后在内容div中添加填充。 Should suffice as a dirty solution for your problem.
应该足以解决您的问题。
.left-nav {
float:left;
width:90px;
background:darkgray;
}
.main-content {
padding-left:100px;
}
JSFIDDLE http://jsfiddle.net/QWhSn/ JSFIDDLE http://jsfiddle.net/QWhSn/
You're better off putting floated element inside the same parent as the content that is supposed to wrap around it. 最好将float元素与应该环绕其内容的内容放在同一父对象中。 So remove the
div
around the pics. 因此,删除图片周围的
div
。
I knocked this up so you could see http://jsfiddle.net/FE3Wj/ 我把它敲了一下,所以你可以看到http://jsfiddle.net/FE3Wj/
That's only my solution: 那只是我的解决方案:
Give #content_living
a width. 赋予
#content_living
宽度。 Than add a float: right;
比添加一个
float: right;
command to the #show_pics
id and delete the float: left
command from #left_nav
. 命令到
#show_pics
id并从#left_nav
删除float: left
命令。 With the width in the #content_living
you can control the space between the two div's inside. 使用
#content_living
的宽度,您可以控制两个div内部之间的空间。 Hope it works. 希望它能工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.