Question

尝试左侧框的宽度为62％，右侧框为38％。无论我添加百分比，他们仍然保持在50％。有任何想法吗？感谢您提供任何可以分享的帮助/建议。

<!DOCTYPE html>
<html>
<head>
<style>
#sides {
  display: flex;
  padding: 0px 0px;
  background-color: white;
}

.sideleft {
  flex: 1;    
  padding: 20px;
  margin: 0;
}

.sideright {
  flex: 1;    
  padding: 20px;
  margin: 0;
}

#left {
  background-color: #333333;
}

#right {
  background-color: #018DCA;
}

h1 {
  color: #FFFFFF;
}

h2 {
  color: #FFFFFF;
}

</style>
</head>
<body>

<div id="sides">
  <div class="sideleft" id="left" align="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="sideright" id="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

</body>
</html>

Answer 1

flex property是flex-grow: flex-shrink: flex-basis:，

的组合

所以设置宽度需要设置flex-basis:

例如：flex: 0 1 38%;

fiddle

Answer 2

你只需要左侧和右侧，向左浮动并显示：这里的内联块是它工作的CSS。您还必须将此情况下的容器div设置为100％

#sides {
  display: flex;
    width: 100%;
  background-color: white;
    margin: 0px;
}

.sideleft {
  flex: 1;  
     width: 62%;
  margin: 0px;
    display: inline-block;
    float: left;
}

.sideright {
  flex: 1;    
    width: 38%;
  margin: 0px;
    display: inline-block;
    float: left;
}

Answer 3

请试试这个：

<!DOCTYPE html>
<html>
<head>
<style>
#sides {

  padding: 0px 0px;
  background-color: white;
}

.sideleft {
  flex: 1;    
  padding: 00px;
  margin: 0;
}

.sideright {
  flex: 1;    
  padding: 00px;


}

#left {
  background-color: #333333;
}

#right {
  background-color: #018DCA;
}

h1 {
  color: #FFFFFF;
}

h2 {
  color: #FFFFFF;
}

</style>
</head>
<body>

<div id="sides">
  <div class="sideleft" id="left"  style=" width:62%">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="sideright" id="right" style=" width:38%; margin-left:62%">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

</body>
</html>

css宽度框

CSS：需要62％和38％的盒子，但似乎找不到合适的配方或代码

3 个答案: