1

这是我的模型：

div

我想像图片中那样设置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');

和小提琴

4

4 回答 4

2

只需浮动中央 div。

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

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

.dia div{
float:left;
}

这是一个你可以摆弄的小提琴

于 2013-08-16T21:42:47.300 回答
1

好吧，我确实设法在这个 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);
}
于 2013-08-16T21:54:50.527 回答
0

试试这个。

<!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>
于 2016-04-07T17:47:11.610 回答
-2

用桌子代替怎么样？

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

于 2013-08-16T21:41:35.910 回答