1

これは私のモックアップです:

div

写真のようにdivを設定したい。DIV 1 と DIV 2 には動的に生成されたコンテンツが含まれており、幅は毎回異なります。

Div 1 は左側に、Div 2 は右側に浮いています。

私の質問は、div 1 と 3 の間に収まるように 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');

そしてフィドル

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 に答える
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 に答える