All geek questions in one place

CSS Float - content remains at the default stack position

I have two divs on the page with the same width and height.

if I give a float: left to the first div, the second div goes up (which is fine, because the moved item is pulled out of the normal document flow)

But why is the contents of the div still showing at the default stack position?

JsFiddle is below

http://jsfiddle.net/xR9Rd/2/

<div class="box0">Box 0</div>   
<div class="box1">Box1</div>

.box0 {
    width: 100px;
    height: 100px;
    background-color: brown;
    float: left;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}
+4
source share
6 answers

100 . , , , ( 100 ).

, :

.box1 {
    width: 150px;
    height: 100px;
    background-color: red;
}

- float, float ( ).

+5

, , , . . , .

div , div (- ), . div. , . div. (box1) div ( ), . , , , .

, margin-left div, div div, , div. .

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: 100px;
}

http://jsfiddle.net/sreekarun/xR9Rd/8/

+4

, . div , 100 100 . div ( ).

+2

:

<html>
<head>
<style>
.box
{
width:200px;
}
.box0 {
    width: 100px;
    height: 100px;
    background-color: brown;
    float: left;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    float:right;
}

</style>
</head>
<body>
<div class="box">
<div class="box0">Box 0</div>   
<div class="box1">Box1</div>
</div>
</body>
</html>
0

, DIV's , Blocks .. float div, - display .

So, add display: inline-blockto the second block, and there you go.

jsFiddle update: http://jsfiddle.net/xR9Rd/4/

.box1 {
    display: inline-block;
}
0
source

You no longer need to use float, just show the two divs as an inline block and slightly reduce the width of each div

<div class="box0">Box 0</div>   
<div class="box1">Box1</div>

.box0 {
 width: 100px;
 height: 100px;
 background-color: brown;
 display:inline-block;
 vertical-align:top;
 }
 .box1 {
 width: 100px;
 height: 100px;
 background-color: red;
 display:inline-block;
 vertical-align:top;
 }
0
source

Source: https://habr.com/ru/post/1540185/

More articles:


All Articles