I have three div
's, #left_sidebar
, #records_list
and #right_sidebar
, I want to display them inline, but when I using display:inline-block
, all seems to be fine but sidebars placing on the bootom of page, then I try to use float
, but still getting some creppy behavior, then I do this:
#left_sidebar {
top: 0px;
width: 142px;
float: left;
}
#records_list {
width: 530px;
display: inline-block;
}
#right_sidebar {
background-image: url('../images/enstein_banner.png');
width: 174px;
height: 231px;
float: right;
}
(you see mix from float
's and display
), and all works fine, so can somebody explain me, if it right? Or I need do this somehow else? Thanks!
PS If you need more info, or it a little bit unclearly what I am asking just say, and I will try to improve question.
#left_sidebar { width: 10%; padding: 20px; background: red; float: left; margin-right: 1%; color: #fff; } #records_list { width: 50%; padding: 20px; background: red; float: left; margin-right: 1%; color: #fff; } #right_sidebar { background-image: url('../images/enstein_banner.png'); width: 15%; padding: 20px; background: red; height: 231px; float: left; color: #fff; }
<div class="wrapper"> <div id="left_sidebar">left bar</div> <div id="records_list">center part</div> <div id="right_sidebar">right bar</div> </div>
Please now check this
Since all the three div
have fixed width, you need a wrapping div
width fixed width.
And gave float:left
instead of inline-block
Check the fiddle - https://jsfiddle.net/afelixj/racnob3f/
I know you know about the concepts of float, i think you need more clarification, There is a good discussion about the float, inline, inline-block here please refer float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
give float left to all blokes, float means that they will become inline and they will displayed one after another if you want to add space between them with margin
make changes like this:
#left_sidebar {
width: 142px;
float: left;
}
#records_list {
width: 530px;
float: left;
}
#right_sidebar {
background-image: url('../images/enstein_banner.png');
width: 174px;
height: 231px;
float: left;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.