将DIV右对齐

Question

Im using a set of layers, with this CSS

.left1 {
    float: left;
    left: 5px;
    width: 72px;
    height: 100px;
}
.left2 {
    height: 100px;
    background-color: red;
    margin-left: 186px;
}
.eventCat {
    float: right;
    width: 5px;
    height: 100px;
}

to make inline divs. however, when i add a layer that i wish to be align to the right, it seems to fall below (the green one .eventCat ). It should be at the right hand side of the red box! even with float:right; what am i missing?

I made a fiddle.. http://jsfiddle.net/7GBca/ to fiddle with :)

Answer 1

It is not floating correctly because .float2 is not floted, my guess is you want it to expand to fill all available width and that's why you didn't set an explicit width. One solution to align .eventCat correctly would be to use position:absolute; and use right:0;

.wrapper {
    position: relative; 
}
.eventCat {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
}
.left2 {
    padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}

Example fiddle

Answer 2

The easiest way to fix this is set a negative top margin to your green div:

.eventCat {
  margin: -100px 0 0 0;
  float: right;
  width: 5px;
  height: 100px;
}

Example Fiddle

Answer 3

您缺少“ left2”的“ width：... px”和“ float：left”，以及“ wrapper”的“ width：... px”。

Answer 4

Your issue is fixed, please check the code here:

<style type="text/css">
.eventCat {
float: right;
width: 5px;
height: 100px;
}
.eventIMG {
float: left;
left: 0;
width: 100px;
height: 100px;
}
.left1 {
float: left;
left: 5px;
width: 72px;
height: 100px;
}
.left2 {
height: 100px;
background-color: red;
margin-left: 186px;
}
.set:hover {
background-color: #FFDEAD;
cursor: pointer;
cursor: hand;
}
#event.title {
font-size: 21px;
font-weight: bold;
color: black;
text-decoration: none;
}
#event {
color: black;
}
</style>

and here is your HTML

<div class="wrapper">
  <div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
  <div class="left1">
    <div style="text-transform: uppercase;">WED 18.09</div>
    <div style="text-transform: uppercase;">kl.22.00</div>
  </div>
  <div class="eventCat" style="background-color:green;"></div>
  <div class="left2" id="event">
    <div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
    <div></div>
    <div class="">
      <p>something here</p>
      <a href="http://hqhq.dk/beta/event/fuzz-manta-dron/" class="" rel="bookmark">Find out more »</a> </div>
  </div>
</div>
<div class="wrapper">
  <div class="eventIMG" style="background:url('http://hqhq.dk/beta/wp-content/uploads/2013/07/png-5.jpg') no-repeat scroll center center / 100% auto transparent"></div>
  <div class="left1">
    <div style="text-transform: uppercase;">WED 18.09</div>
    <div style="text-transform: uppercase;">kl.22.00</div>
  </div>
  <div class="eventCat" style="background-color:green;"></div>
  <div class="left2" id="event">
    <div id="event" class="title"><a class="url" href="http://hqhq.dk/beta/event/fuzz-manta-dron/" title="FUZZ MANTA + DRÖN" rel="bookmark">FUZZ MANTA + DRÖN</a></div>
    <div></div>
    <div class="">
      <p>something here</p>
      <a href="http://hqhq.dk/beta/event/fuzz-manta-dron/" class="" rel="bookmark">Find out more »</a> </div>
  </div>
</div>

What you have to do there is to replace you div.eventCat with div.left2 that's it :-)

Fiddle : http://jsfiddle.net/KRU9U/

Cheers

Answer 5

将eventCat （要浮动到右侧的元素）作为wrapper下的第一个元素。