Question

简单的问题：我有两个div，我希望它们并排，像这样：

＆＃13;

.details-left {
   background: yellow;
    float: left;
    width: 50%;
}

.details-right {
   background: silver; 
    width: 50%;
    float: left;
}

＆＃13;

<div class="details-left">left</div>
<div class="details-right">right</div>

＆＃13;

问题是，如果div中只有一个使用float可以产生相同的效果吗？具体问题是，黄色div可以包含float: left，银div可以包含float。我想在银色div上使用awk -F '\\| ' -v OFS='| ' '{ cmd = "date -d \"" $3 "\" +%F 2> /dev/null"; cmd | getline $3; close(cmd) } 1' filename来达到同样的效果。

我怎样才能实现它？

Here's a fiddle

Answer 1

使用display:inline-block来实现您的目标。

.details-left {
   background: yellow;
    float: left;
    width: 50%;
}

.details-right {
   background: silver; 
    width: 50%;
    display:inline-block;
}

<div class="details-left">left</div>
<div class="details-right">right</div>

UPDATED FIDDLE

Answer 2

您可以将display: inline-block用于银色div

http://jsfiddle.net/94Lxd5c4/

.details-right {
    background: silver; 
    width: 50%;
    display: inline-block;
}

或者您可以定义overflow: hidden;或overflow: auto;。无论你是否添加float: left（它都没有任何区别），银div的行为都是一样的

http://jsfiddle.net/ogwvjjs9/2/

.details-right {
    background: silver; 
    width: 50%;
    overflow: auto;
}

Answer 3

.details-left {
   background: yellow;
    float: left;
    width: 50%;
}

.details-right {
   background: silver; 
    width: 50%;
    position : absolute;
    left : 50%;
}

<div class="details-left">left</div>
<div class="details-right">right</div>

我希望这就是你要找的东西

Answer 4

使用display:table和display:table-cell来满足您的需求。

我又添加了一个div作为表格

<强>＆LT; div class =“details”＆gt;

在div下方充当表格单元格

<强>＆LT; div class =“details-left”＆gt; left＆lt; / DIV＆GT;

<强>＆LT; div class =“details-right”＆gt; right＆lt; / DIV＆GT;

<div class="details">
<div class="details-left">left</div>
<div class="details-right">right</div>
</div>

HTML

.details { display:table; width:100%; overflow:hidden;}
.details-left {
   background: yellow;
   display:table-cell;
   width: 50%;
}

.details-right {
   background: silver; 
    width: 50%;
   display:table-cell;
}

CSS

演示：http://jsfiddle.net/ravinthranath/skuvnvqL/

简单的div处理问题

4 个答案: