Question

我使用一组图层，使用此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;
}

制作内联div。然而，当我添加一个我希望与右边对齐的图层时，它似乎落在下面（绿色的.eventCat）。它应该在红色框的右侧！即使float:right;我缺少什么？

我做了一个小提琴.. http://jsfiddle.net/7GBca/来摆弄：）

Answer 1

它没有正确浮动，因为.float2没有被翻转，我的猜测是你希望它扩展以填充所有可用的宽度，这就是你没有设置显式宽度的原因。正确对齐.eventCat的一种解决方案是使用position:absolute;并使用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

解决此问题的最简单方法是为您的绿色div设置负上限：

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

Example Fiddle

Answer 3

你缺少'wrap2'的'left2'和'width：... px'的“width：... px”和“float：left”。

Answer 4

您的问题已修复，请在此处查看代码：

<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>

这是您的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>

你需要做的是用div.left2替换div.eventCat，它是： - ）

小提琴：http://jsfiddle.net/KRU9U/

干杯

Answer 5

将eventCat（您要浮动的元素）放在wrapper下面的第一个元素。

将DIV对齐到右边

5 个答案: