div左右浮动+另一个div

Question

这是我的模型：

申报单

我想将div设置为如图所示。 DIV 1和DIV 2包含动态生成的内容，并且宽度每次都不同。

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

我的问题是：如何将Div 3放置在div 1和div 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');

和小提琴

Answer 1

只需将中央div浮动即可。

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

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

.dia div{
float:left;
}

这里有一个小提琴，你可以拨弄

Answer 2

好吧，我确实设法做到了这一点，但是感觉有点像变通办法，因为您必须小心中心内容。 然后，它再次起作用，因此您可以将其用作占位符或其他东西，直到您或其他人提出更好的解决方案为止。

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/

div左右浮动+另一个div

问题描述

4 个解决方案

解决方案1
2 2013-08-16 21:42:47

解决方案2
1 已采纳 2013-08-16 21:54:50

解决方案3
0 2016-04-07 17:47:11

解决方案4
-2 2013-08-16 21:41:35

div左右浮动+另一个div

问题描述

4 个解决方案

解决方案1 2 2013-08-16 21:42:47

解决方案2 1 已采纳 2013-08-16 21:54:50

解决方案3 0 2016-04-07 17:47:11

解决方案4 -2 2013-08-16 21:41:35

解决方案1
2 2013-08-16 21:42:47

解决方案2
1 已采纳 2013-08-16 21:54:50

解决方案3
0 2016-04-07 17:47:11

解决方案4
-2 2013-08-16 21:41:35