Question

这是我的模型：

divs

我想在图片中设置div。 DIV 1和DIV 2包含动态生成的内容，每次宽度都不同。

Div 1浮动到左侧，Div 2浮动到右侧。

我的问题是：如何将Div 3定位在div 1和3之间？

我的代码是： HTML

<div class="dia">
 <div class="left">sassssss</div>
 <div class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
 <div class="right">asdasdfgdsgdf</div>
</div>

CSS

.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}

.dia .center {
 margin-left: 20px;
}


.dia .left, .dia .right {
 overflow: hidden;
}

.dia .left {
 float: left;
 margin-right: 10px;
}

.dia .right {
 float: right;
 margin-left: 10px;
 background: rgb(214,214,214);
}

我希望适合中心div现在太宽，并且向右移动div低于我想要的。

的解决方案：

HTML

<div class="dia">
 <div class="left">sassssss</div>
 <div class="center">ddddddddddddddddddddd dddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddd dddddddddddd</div>
 <div class="right">asdasdfgdsgdf</div>
</div>

CSS

.dia {
 background: #282828;
 padding: 10px;
 height: 106px;
 border-radius: 5px;
 width: inherit;
}

.dia .left, .dia .right {
 overflow: hidden;
 height: 106px;
}

.dia .left {
 float: left;
 margin-right: 10px;
}

.dia .right {
 float: right;
 margin-left: 10px;
}

.dia .center {
 height: inherit;
 float: left;
}

JQuery的

$('.dia .left a:not(:first-child)').css('width',$('.dia a').outerWidth(true)+'px'); 
$('.dia .center').css('width',$('.dia').width()-$('.dia .left').outerWidth(true)-$('.dia .right').outerWidth(true)+'px');

Fiddle

Answer 1

简单地漂浮中央div。

为了您的目的，您可以使用案例：

.dia{
float:left//Float container in order to contain nested elements.
}

.dia div{
float:left;
}

这是你可以摆弄的fiddle

Answer 2

我确实设法在this fiddle中执行此操作，但感觉有点像解决方法，因为您必须小心中心内容。然后，它可以工作，所以你可以将它用作占位符或其他东西，直到你或其他人提出更好的解决方案。

CSS：

.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}

.dia .center {
overflow:auto;
height: 100px;
background-color: #aaa;
margin-left: 20px;
}

.dia .left {
float: left;
height: 100px;
background-color: #ddd;
}

.dia .right {
position:absolute;
/*.dia padding + border*/
right: 15px;
/*.dia padding + border + (.dia height - this height)/2*/
top: 18px;
height: 100px;
background: rgb(214,214,214);
}

Answer 3

试试这个。

<!DOCTYPE html>
<html>
<head>
<style> 
#main 
{
    width: 100%;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#panelLeft, #panelRight
{
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}

#panelCenter
{
    -webkit-flex: 3;  /* Safari 6.1+ */
    -ms-flex: 3;  /* IE 10 */    
    flex: 3;
}
</style>
</head>
<body>

<div id="main">
  <div id="panelLeft" style="background-color:coral;">RED</div>
  <div id="panelCenter" style="background-color:lightblue;">BLUE</div>  
  <div id="panelRight" style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>

Answer 4

如何使用表格呢？

<table class="dia">
    <tbody>
        <tr>
             <td class="left">sassssss</td>
             <td class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
             <td class="right">asdasdfgdsgdf</td>
        </tr>
    </tbody>
</table>

然后CSS将是：

.dia {
    background: #282828;
    padding: 10px;
    height: 106px;
    border-radius: 5px;
    width: 100%;
    table-layout: fixed;
}

.dia .center {
    margin-left: 20px;
    word-wrap: break-word;
}


.dia .left, .dia .right {
    overflow: hidden;
}

.dia .left {
    float: left;
    margin-right: 10px;
}

.dia .right {
    float: right;
    margin-left: 10px;
    background: rgb(214,214,214);
}

http://jsfiddle.net/YvnnW/13/

divs浮动到左边和右边+另一个div

4 个答案: