Fatal编程技术网
  • css/
  • Css div向左和向右浮动+；中间还有一个小分队

Css div向左和向右浮动+；中间还有一个小分队

css html

Css div向左和向右浮动+；中间还有一个小分队,css,html,Css,Html,这是我的模型： 我想把div设置成图中的那样。DIV 1和DIV 2包含动态生成的内容，宽度每次都不同 Div 1浮动到左侧，Div 2浮动到右侧 我的问题是：如何定位Div 3以使其适合Div 1和Div 3 我的代码是： HTML 我想调整中间的弧度，它现在太宽了，而且右弧度比我想要的低 解决方案： HTML <div class="dia"> <div class="left">sassssss</div> <div class="cent

这是我的模型：

我想把div设置成图中的那样。DIV 1和DIV 2包含动态生成的内容，宽度每次都不同

Div 1浮动到左侧，Div 2浮动到右侧

我的问题是：如何定位Div 3以使其适合Div 1和Div 3

我的代码是： HTML

我想调整中间的弧度，它现在太宽了，而且右弧度比我想要的低


解决方案：

HTML

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

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

用桌子代替怎么样

<table class="dia">
    <tbody>
        <tr>
             <td class="left">sassssss</td>
             <td class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
             <td class="right">asdasdfgdsgdf</td>
        </tr>
    </tbody>
</table>
用桌子代替怎么样

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

只需浮动中央div即可

出于您的目的，您可以使用：

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

.dia div{
float:left;
}
这里有一个你可以摆弄的，只需浮动中央div

出于您的目的，您可以使用：

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

.dia div{
float:left;
}
这里有一个你可以摆弄的

我确实在中设法做到了这一点，但它感觉有点像一个变通方法，因为你必须小心处理中心内容。再说一遍，它是有效的，所以你可以用它作为占位符或其他东西，直到你或其他人想出更好的解决方案

CSS:

嗯，我确实设法做到了这一点，但它感觉有点像一个解决办法，因为你必须小心与中心内容。再说一遍，它是有效的，所以你可以用它作为占位符或其他东西，直到你或其他人想出更好的解决方案

CSS:

试试这个

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


#主要
{
宽度：100%；
高度：300px；
边框：1px纯黑；
显示：-webkit flex；/*Safari*/
显示器：flex；
}
#面板左，#面板右
{
-webkit flex:1；/*Safari 6.1+*/
-ms flex:1；/*即10*/
弹性：1；
}
#面板中心
{
-webkit flex:3；/*Safari 6.1+*/
-ms flex:3；/*即10*/
弹性：3；
}
红色
蓝色
有更多内容的绿色div。
试试这个

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


#主要
{
宽度：100%；
高度：300px；
边框：1px纯黑；
显示：-webkit flex；/*Safari*/
显示器：flex；
}
#面板左，#面板右
{
-webkit flex:1；/*Safari 6.1+*/
-ms flex:1；/*即10*/
弹性：1；
}
#面板中心
{
-webkit flex:3；/*Safari 6.1+*/
-ms flex:3；/*即10*/
弹性：3；
}
红色
蓝色
有更多内容的绿色div。
如果这个问题对将来的访问者仍然有用，请将您的代码添加到问题中。您知道生成页面时div 1和div 2的宽度有多宽吗？为您的
.dia
/parent类设置一个固定的宽度可以解决您的问题。Jeroen:我在几分钟后添加它。劳伦斯：不，我不知道。沙哈尔：我明天试试看沙哈尔：我设定了固定宽度，但对我不起作用。请在问题中添加你的代码，这样，如果这个问题对未来的访问者仍然有用。您知道生成页面时div 1和div 2的宽度吗？为您的
.dia
/parent类设置一个固定的宽度可以解决您的问题。Jeroen:我在几分钟后添加它。劳伦斯：不，我不知道。沙哈尔：我明天试试看沙哈尔：我设定了固定宽度，但对我不起作用。在大多数情况下我都同意。不过，这使得这个问题很容易解决。看到HTML是语义的，而OP没有说明，最好使用div或sections或任何非表的东西，这会使页面膨胀且不灵活。表用于保存表格数据。我无法理解为什么人们决定继续使用它们进行布局。每个浏览器呈现它们的方式都不同。因此，即使使用表似乎更容易，最终还是会有一些用户为此付出代价。我正在从表中重写页面，因此无法使用您的解决方案（但您的小提琴显示了我想要做的事情）；）邓诺的想法行得通。只要您还添加了
断字：断字到你的div，这样那些超长的单词将被强制包装。我同意在大多数情况下。不过，这使得这个问题很容易解决。看到HTML是语义的，而OP没有说明，最好使用div或sections或任何非表的东西，这会使页面膨胀且不灵活。表用于保存表格数据。我无法理解为什么人们决定继续使用它们进行布局。每个浏览器呈现它们的方式都不同。因此，即使使用表似乎更容易，最终还是会有一些用户为此付出代价。我正在从表中重写页面，因此无法使用您的解决方案（但您的小提琴显示了我想要做的事情）；）邓诺的想法行得通。只要您还添加了
断字：断字到你的div，这样那些超长单词将被强制换行。但是当父div不够宽时，三个div将一个接一个。尝试将结果区域的大小调整为较小的宽度，您将看到。我希望在我的模型上有类似的东西。你可以添加一个最小宽度属性来避免这种情况。这完全取决于内容。像这样，但我不知道div1和div2中的内容所需的最小宽度。它将有动态大小的内容。所以使用javascript。你不可能拥有全部，但也许我可以计算侧边div的安全宽度。。谢谢；）所以JavaScript可以帮助我。正确的。我想把你的答案标记为有用，但我没有足够的声誉。我怎样才能得到一些呢？但当父div不够宽时，三个div将一个接一个。尝试将结果区域的大小调整为较小的宽度，您将看到。我希望在我的模型上有类似的东西。你可以添加一个最小宽度属性来避免这种情况。这完全取决于内容。像这样，但我不知道div1和div2中的内容所需的最小宽度。它将有动态大小的内容。所以使用javascript。你不可能拥有全部，但也许我可以计算侧边div的安全宽度。。谢谢；）所以JavaScript可以帮助我。正确的。我想把你的答案标记为有用，但我没有足够的声誉。我怎样才能弄到一些呢？那么。在这把小提琴上我只需要加上断线；）这取决于你使用侧边div的目的。如果他们没有太多的内容，这应该不是问题。但我认为raam的回答和评论

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



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