Position elements around another with CSS

问题

I want to achieve this result with HTML and CSS:

Where the red box is a big content (A PDF content), and the blue ones organize around it. First by its side and then, when there is enough room, under it.

My HTML structure is as follows, but I can change it:

<div id="outerContainer">
    <div id="bigRedBox"></div>
    <div>
        <ul id="blueContentList">
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
            <li class="blueContent"></li>
        </ul>
    </div>
</div>

By now, the positioning stays like this:

I don't know if this is possible without setting up two containers (One on the side, one below), which I can do, but would make me write lots of JS.

回答1:

You could do something like this for the list items, of course, it's not responsive, but you can use % or media queries to optimize it.

#blueContentList li{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
    float: left;
}

http://jsfiddle.net/tomsarduy/ywms6soq/

回答2:

You can achieve what you want by having all the elements float and be siblings of each other.

#bigRedBox {
  width:80%;
  height:150px;
  background-color:red;
  float:left;
  margin:5px;
}
.blueContent {
  width:15%;
  height:50px;
  background-color:blue;
  float:left;
  margin:5px;
}

<div id="outerContainer">
  <div id="bigRedBox"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
  <div class="blueContent"></div>
</div>

回答3:

I personally wouldn't use floats. I suggest a column/row type of layout. here's a fiddle: http://jsfiddle.net/xa91f4Lw/

just use display: inline-block and make use of plain divs when you want something to be a new "row"

new fiddle: http://jsfiddle.net/xa91f4Lw/1/

or this: http://jsfiddle.net/xa91f4Lw/2/

回答4:

You can check the grid structure already provided by bootstrap. Alternatively you can also try to achieve this using applying float : left to all the square elements.

来源：https://stackoverflow.com/questions/32830701/position-elements-around-another-with-css

标签

html

css

css-position