如何将百分比宽度分配给div？

我有主div和里面，我有3个divs，每个都有单独的百分比宽度。所以我分别获得了20％，80％和100％的div。与他们合作到目前为止，我意识到，如果我已经给出了200％的宽度，那么它将浏览器宽度分成两个相等的部分，前半部分被认为是100％，另一半则是100％。然后发生其余的百分比分配。我是CSS新手，但想清楚说明。我的理解是否正确，这就是为什么我的代码工作正常？这样做有什么不利吗？如何将百分比宽度分配给div？

.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
} 
 

 
.column1 { 
 
    position: relative; 
 
    line-height: 30px; 
 
    width: 20%; 
 
    text-align: left; 
 
} 
 

 
.column2 { 
 
    width: 80%; 
 
} 
 

 
.column3 { 
 
    position: relative; 
 
    width: 100%; 
 
    float: right; 
 
    text-align: right; 
 
} 
 

 
.clear-both { 
 
    clear: both; 
 
} 
 

 
.row { 
 
    border-width: 2px; 
 
    border-bottom-color: #f4f4f4; 
 
    border-style: none; 
 
    position: relative; 
 
    line-height: 30px; 
 
    border-bottom-style: solid; 
 
    margin-top: 0.2%; 
 
    font-weight: normal; 
 
    font-size: 12px; 
 
    display: flex; 
 
}

<div class="row main"> 
 

 
    <div class="column1">CODE</div> 
 

 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

来源

2017-05-04 shahista inamdar

这里有什么问题，你想达到什么？ –

我得到了我想要的，即我想要这3列在一行。但我不确定这是否是正确的方式来做到这一点，如果我以这种方式做到这一点，是否有任何可能会打破用户界面，因为我的总宽度是200％？ –

保持你的父母div 100％不是200％。200％像宽度是水平网站或滑块像东西 –

你做错了。

请记住以下事项。

1-父/主div应该有百分比或像素的适当宽度。如果你没有指定宽度，那么它将根据宽度的内容自动取得宽度。

2-如果您将百分比宽度指定给子div（column1，column2等），那么子div的总数不应超过100％。如果超过，那么你不会得到理想的/适当的结果。

3-您需要使用浮动或显示：inline-block将所有子div /元素放在一行中。

.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
    width: 100%; 
 
    max-width: 1140px; 
 
    margin: 0 auto; 
 
} 
 

 
.column1 { 
 
    position: relative; 
 
    line-height: 30px; 
 
    width: 20%; 
 
    text-align: left; 
 
    float: left; 
 
} 
 

 
.column2 { 
 
    width: 60%; 
 
    float: left; 
 
} 
 

 
.column3 { 
 
    position: relative; 
 
    width: 20%; 
 
    text-align: right; 
 
    float: left; 
 
}

<div class="row main"> 
 
    <div class="column1">CODE</div> 
 

 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

如果您使用的填充或边框，那么你可能需要使用盒大小：边界盒。

来源

2017-05-04 09:41:58

如果使用Flexbox的，这使得它更清晰的你，而不是使用float s的position混合，

body { 
 
    margin: 0 
 
} 
 

 
.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.column1 { 
 
    flex: 0 20%; 
 
    background: red 
 
} 
 

 
.column2 { 
 
    flex: 0 80%; 
 
    background: green 
 
} 
 

 
.column3 { 
 
    flex: 0 100%; 
 
    background: yellow 
 
}

<div class="main"> 
 
    <div class="column1">CODE</div> 
 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

编辑 OP的评论

我想这3列是在一行。使用我的代码，但主div的总宽度是200％。在那里你可以做到这一点的方式打破 UI的，如果我做这样

任何可能性：

body { 
 
    margin: 0 
 
} 
 

 
.main { 
 
    font-size: larger; 
 
    font-weight: bold; 
 
    display: flex 
 
} 
 

 
.column1, 
 
.column3 { 
 
    flex: 0 20%; 
 
    background: yellow 
 
} 
 

 
.column2 { 
 
    flex: 1; 
 
    background: green 
 
}

<div class="main"> 
 
    <div class="column1">CODE</div> 
 
    <div class="column2 ">NAME</div> 
 
    <div class="column3">TOTAL</div> 
 
</div>

来源

2017-05-04 09:37:51 dippas

我想这3列是在一行。使用我的代码，但主div的总宽度是200％。如果我这样做，是否有任何破坏用户界面的可能性 –

好的。您仍然需要将子div的总数保持为100％。在任何情况下，column1，column2和column3的总宽度都不应大于父div。 –

@shahistainamdar看到更新的答案 – dippas

您可以使用bootstrap网格系统。

网格系统用于通过一系列容纳您的内容的行和列来创建页面布局。

所以，你可以根据你所使用的设备轻松管理您的布局：

.COL-LG *类是指大型设备。
.col-md *类是指中型设备。
.col-xs *类是指小尺寸设备。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-2 col-xs-2 bg-warning">CODE</div> 
 
    <div class="col-md-10 col-xs-10 bg-primary">NAME</div> 
 
    <div class="col-md-12 col-xs-12 bg-success">TOTAL</div> 
 
</div>

来源

2017-05-04 09:45:02

如何将百分比宽度分配给div？

回答

相关问题