1

我使用一组图层，使用这个 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/来摆弄:)

4

5 回答 5

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*/
}

示例小提琴

于 2013-07-27T06:04:09.547 回答
0

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

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

示例小提琴

于 2013-07-27T05:46:41.230 回答
0

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

于 2013-07-27T05:52:59.553 回答
0

您的问题已解决，请查看此处的代码：

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

干杯

于 2013-07-27T07:47:24.943 回答
0

将eventCat（要向右浮动的元素）作为第一个元素放在wrapper.

于 2013-07-27T11:36:16.760 回答