div左右浮动+另一个div

Question

This is my mockup: 这是我的模型：

申报单

I want to set divs as in the picture. 我想将div设置为如图所示。 DIV 1 and DIV 2 contain dynamically generated content and the width is different every time. DIV 1和DIV 2包含动态生成的内容，并且宽度每次都不同。

Div 1 is floated to the left side and Div 2 is floated to the right side. Div 1浮动在左侧，Div 2浮动在右侧。

My question is: how to position Div 3 to fit it between div 1 and 3? 我的问题是：如何将Div 3放置在div 1和div 3之间？

My code is: HTML 我的代码是：HTML

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

CSS 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);
}

and I want to fit center div which now is too wide and moves right div lower than I want. 并且我想调整中心div，该中心现在太宽了，并且右div比我想要的低。

SOLUTION: 解：

HTML HTML

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

CSS 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 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');

And Fiddle 和小提琴

Answer 1

Simply float the central div. 只需将中央div浮动即可。

For your purpose you case use: 为了您的目的，请使用以下案例：

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

.dia div{
float:left;
}

Here's a fiddle you can fiddle with 这里有一个小提琴，你可以拨弄

Answer 2

Well I did manage to do this in this fiddle , but it feels a little like a workaround, since you have to be careful with center content. 好吧，我确实设法做到了这一点，但是感觉有点像变通办法，因为您必须小心中心内容。 Then again, it works, so you can use it as a placeholder or something until you or someone else comes up with better solution. 然后，它再次起作用，因此您可以将其用作占位符或其他东西，直到您或其他人提出更好的解决方案为止。

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

try this. 尝试这个。

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

How about using a table instead? 如何使用表格呢？

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

Then the CSS would be: 那么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/ 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