[英]CSS - How to place div side by side with no space at left and right
I have a parent div with multiple child div, I want to make the child div float side by side 4 per row. 我有一个有多个子div的父div,我想使子div每行并排浮动4。
floating rule must: 浮动规则必须:
by using css/css3 is posible to done it? 通过使用css / css3可以做到吗? sorry for my english.
对不起我的英语不好。
With CSS3 this is relatively easy: using box-sizing: border-box;
使用CSS3,这相对容易一些:使用
box-sizing: border-box;
, the width of the child div will be including padding (eg 20px
) and border, and can be set to 25% of the width the body. ,子div的宽度将包括填充(例如
20px
)和边框,并且可以设置为主体宽度的25%。 Give the parent div, the wrapper, a negative right-margin to hide the rightmost space. 给父div(包装器)一个负的右边距,以隐藏最右边的空间。 Due to that extra space, a scroll bar will appear on the body which can be hidden with
overflow-x: hidden;
由于存在额外的空间,滚动条将出现在主体上,可以用
overflow-x: hidden;
该滚动条overflow-x: hidden;
. 。
body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { margin-right: -20px; } .child { box-sizing: border-box; width: 25%; padding-right: 20px; float: left; } .child p { background: lime; }
<p>Content</p> <div class="wrapper"> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> </div> <p>Content</p>
There are some pretty nice examples out here, however I'd always want to have a look at a way to have my images aligned with my text. 这里有一些很好的例子,但是我总是想看看一种使图像与文本对齐的方法。 To do this I've been using a page wrapper and an image wrapper with a negative margin (to place it out of line with the text).
为此,我一直在使用页面包装纸和图像包装纸,其边距为负(以使其与文本不对齐)。 Then after applying that same value as a positive padding value, the images are perfectly aligned with the text.
然后,将相同的值用作正填充值后,图像将与文本完美对齐。
#pagewrapper {
width: 500px;
background: green;
overflow: hidden;
}
#imagewrapper {
width: auto;
margin: 0 -12px; /* negative margin to keep images aligned with text, same as margin below */
background: blue;
}
.image {
box-sizing: border-box;
width: 25%;
padding: 0 12px;
margin: 0;
height: 200px;
background: red;
float: left;
overflow: hidden;
}
Just saw, @user2782378 answer.. i think i should elaborate on this by giving my answer: 刚刚看到,@ user2782378答案..我想我应该通过给出我的答案来详细说明一下:
div{float:left;width:20%;background:black;height:100px;margin:1px;}
For studying the css used: 为了研究使用的css:
Try using display:inline-block
modify child div's width proportionally 尝试使用
display:inline-block
按比例修改子div的宽度
.outer_div{
display:inline-block;
max-width:800px;
height:300px;
background-color:red;
overflow:auto;
}
.inner_div{
width:200px;
height:100px;
background-color:black;
float:left;
}
Maybe this pure CSS2 solution is preferable. 也许这种纯CSS2解决方案是更可取的。
A div
is a block element which defaults to the page's width. div
是默认为页面宽度的块元素。 If you give the wrapper div a right margin of three times the margin between the inner div's, then 25% of the wrapper width is exactly the width of the inner div. 如果给包装div的右边距为内部div的边距的三倍,则包装宽度的25%就是内部div的宽度。 Adjust for the location of the inner divs with relative positioning:
通过相对位置调整内部div的位置:
html, body { margin: 0; padding: 0; } .wrapper { margin-right: 30px; } .wrapper div { width: 25%; float: left; position: relative; background: lime; /* demo setting */ height: 100px; /* demo setting */ } .wrapper div+div { left: 10px; } .wrapper div+div+div { left: 20px; } .wrapper div+div+div+div { left: 30px; }
<div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div>
Try this.. 尝试这个..
.row {
width: 100%;
text-align: center; // center the content of the container
}
.block {
width: 100px;
display: inline-block; // display inline with abality to provide width/height
}
having margin: 0 auto; 具有保证金:0自动; along with width: 100% is useless because you element will take the full space.
以及宽度:100%是无用的,因为您的元素会占用全部空间。
float: left will float the elements on the left, until there is no space left, thus they will go on a new line. float:left将元素左移,直到没有空间,因此它们将换行。 Use display: inline-block to be able to display elements inline, burt with the ability to provide size (compared to display inline where width/height are ignored)
使用display:inline-block可以内联显示元素,并提供尺寸(可忽略宽度/高度的内联显示)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.