CSS盒子位置浮动

Question

Good afternoon ! I have a question concerning 3 independent boxes, all of them should contain text.

• 1 top left
• 1 top right
• In the middle a text field, could also be a box (how can I do that?)
• 1 box down center

I know it is about styling, but please can you help me ? At the moment I have the following in my css: I deleted color, text and so on.. Is it also possible to find a way that for smaller screens the boxes are reducing their size.? Hope you understand what I mean.

#box1 {
    width: 300px;
    padding: 25px;
    margin: 100px;
    float: left;
}


#box2 {
    width: 300px;
    padding: 25px;
    margin: 100px ;
    float: right;

}

#box3 {
    width: 400px;
    padding: 10px;
    margin: auto;

I have an example here, http://jsfiddle.net/3cUF5/5/ . The problem is, i need the green box in the middle und the 3 blue boxes should be not limited on 800px. Hope you can help. Or is there a JQuery Plugin for that? Tips and hints are welcome

Answer 1

Solution

You could use pure CSS to solve your problem. With CSS Flexbox you can center your content easily. You can change the width to 800px if you want your container not to be 100%

CSS

.boxes {  
    display: -webkit-box;
    display: -moz-box;   
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    width: 100%;
}

.box {
    background-color: blue;    
    height: 100px;
    margin: 30px;
    width: 100px;    
}

.boxM {
    background-color: green;
    height: 100px;        
    width: 100px;
}

HTML

<div class="boxes">
    <div class="box">Box1</div>
    <div class="box">Box2</div>
    <div class="box">Box3</div>
</div>
<div class="boxes">    
    <div class="boxM">Box2</div>
</div>

Fiddle

http://jsfiddle.net/3cUF5/11/

Answer 2

You can do this (remove the floats and set them to display:inline-block):

CSS

#boxes {
  width: 800px;
  text-align: center;
}

#boxes .box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 30px;
  background-color: blue;
}

#boxes .boxM {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: green;
}

DEMO HERE

Answer 3

If each divs has static width, just set margin-left: 190px to boxM class. Also, you'll have to delete float: left property in #boxes and add clear after first boxes div.

So the result of html file will be like this

<div id="boxes">
    <div class="box">Box1</div>
    <div class="box">Box2</div>
    <div class="box">Box3</div>
</div>

<div style="clear:both"></div>

<div id="boxes">    
    <div class="boxM">Box2</div>
</div>

and your css:

#boxes {
    width: 800px;
}

#boxes .box {
    width: 100px;
    height: 100px;
    margin: 30px;
    float: left;
    background-color: blue;
}

#boxes .boxM {
    width: 100px;
    height: 100px;
    margin-left: 190px;
    background-color: green;
}

Answer 4

Is that what you need ? DEMO

 #boxes { width: 800px; text-align: center; } #boxes .box { width: 100px; height: 100px; margin: 30px; display: inline-block; background-color: blue; } #boxes .boxM { width: 100px; height: 100px; background-color: green; margin: auto; display: block; } 

 <div id="boxes"> <div class="box">Box1</div> <div class="box">Box2</div> <div class="box">Box3</div> </div> <div id="boxes"> <div class="boxM">Box2</div> </div> 

Answer 5

Not too tricky with absolute positioning. Will work with any size of container.

 #boxes { width: 800px; position: relative; } #boxes .box { width: 100px; height: 100px; background-color: blue; position: absolute; } #boxes .box1 { left: 0; } #boxes .box2 { left: 50%; margin-left: -50px; /* half width */ } #boxes .box3 { right: 0; } #boxes .boxM { width: 100px; height: 100px; margin: 0 auto; background-color: green; position: absolute; top: 120px; left: 50%; margin-left: -50px; /* half width */ } 

 <div id="boxes"> <div class="box box1">Box1</div> <div class="box box2">Box2</div> <div class="box box3">Box3</div> <div class="boxM">Box2</div> </div> 

Also you shouldn't use an ID in your HTML more than once.