How to align div elements?

问题

I am trying to make a jsp page on product details. I'm a bit new to CSS so I am unable to align the div elements side by side.

.nav {
  float: right;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #F2EEE9;
  font: normal 13px/1.5 Georgia, Serif;
  color: #333;
}
.item {
  background-color: #fff;
  position: relative;
  margin: 30px auto 30px auto;
  width: 978px;
}
.item img {
  display: block;
  margin: auto;
}

<div class="item">
  <div style="background: url(http://placehold.it/370x330); height: 370px; width: 330px;"></div>
    <div class="pdetails">
        </div>
</div>

I want to add a div element on the right side of the image box but I am unable to do it.

image preview

回答1:

Use style="display:inline-block" with the div.

This is because <div> are block elements by default so they will take the whole of the row on the page. Using display:inline-block will make it align on the same line thus behaving like inline element but retaining its block element properties.

Read more about display properties in Css.

Edit: As per the question add the following styles(dummy values change accordingly):

For the div containing image:

display: inline-block

.pdetails {
  height: 370px;
  width: 330px;
  display: inline-block;
}

See the screenshot:

enter image description here

回答2:

<div class="item">
  <div style="background: url(<%=request.getParameter("img")%>); height: 370px; width: 330px; display:inline-block">
  </div>
</div>

回答3:

float : The float property specifies whether or not a box (an element) should float.

Note: Absolutely positioned elements ignores the float property!

float: none|left|right|initial|inherit;

Clear : The clear property specifies on which sides of an element where floating elements are not allowed to float

Css syntax :

<div id="wrapper">
        <div id="leftcolumn">
            Left
        </div>
        <div id="rightcolumn">
            Right
        </div>
    </div>

css

 body {
        background-color: #444;
        margin: 0;
    }

    #wrapper {
         width: 1005px;
         margin: 0 auto;
    }
    #leftcolumn, #rightcolumn {
        border: 1px solid white;
        float: left;
        min-height: 450px;
        color: white;
    }
    #leftcolumn {
         width: 250px;
         background-color: #111;
    }

    #rightcolumn {
         width: 750px;
         background-color: #777;
    }

http://jsfiddle.net/8weSA/1/

回答4:

You can do it simply by making both the elements float left like i did it in the example or there are other ways like inline and inline-block.

.fleft{float:left}

<img class='fleft' src='http://cdn2.expertreviews.co.uk/sites/expertreviews/files/0/69//nexus_6_0134.jpg?itok=lYrhMv6H' height='200px'>
<div class='fright title'>Nexus 6</div>

回答5:

Its very simple. just use :

html:

<div class="left-align">
..your left item..
</div>

<div class="right-align">
    ...your right item..
    </div>

css:

left-align{
float:left;
width:50%;
}

you just have to give your left item "float:left", because often right item depends on your left item's width and its float property.

来源：https://stackoverflow.com/questions/31334657/how-to-align-div-elements

标签

javascript

jquery

html

css

jsp