divs浮动到左侧和右侧+另一个div [英] divs floated to left and right + another div therebetween

问题描述

这是我的模型：

我想在图片中设置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> dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd< / 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现在太宽，

解决方案：


HTML

 < div class =dia> 
< div class =left> sassssss< / div> 
< div class =center> ddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddd< / 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'）; 
  
并且小提琴 
解决方案
我已经设法在这个小提琴，但感觉有点像一个解决方法，因为你必须小心中心内容。再次，它的工作原理，所以你可以使用它作为占位符或东西，直到你或其他人出现更好的解决方案。
 
 
 
 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）; 
} 
  
 
This is my mockup: 



I want to set divs as in the picture. DIV 1 and DIV 2 contain dynamically generated content and the width is different every time. 

Div 1 is floated to the left side and Div 2 is floated to the right side.

My question is: how to position Div 3 to fit it between div 1 and 3?

My code is:
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);
}
and I want to fit center div which now is too wide and moves right div lower than I want.



SOLUTION:


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');
And Fiddle
解决方案
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:
.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);
}


                        
这篇关于divs浮动到左侧和右侧+另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！