css使div在栏中彼此相邻显示

debugcn 发表于 Dev

伏祖波

我正在尝试将所有这些技能添加到一个酒吧中。文本不需要显示，只希望它们都显示在同一个而不是四个分开的

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}

<html>
<head>
<style>

</style>
</head>
<body>

<h1>My Skills</h1>

<p>HTML</p>
<div class="container">
  <div class="skills html">10%</div>  
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

</body>
</html>

那些。因为它是四个，所以都需要是 25%

sn3ll

首先要知道的是divs 是块元素，并且会占据它们 100% 的容器（在这种情况下是容器 div，也就是 100% 的<body>）。您需要将显示属性设置为display: inline-block. 这将允许它们设置宽度。

其次，宽度的百分比需要加起来等于或小于 100%。超过 100%，他们将开始换行到下一行。

请参阅下面的代码片段。

编辑：还应该提到，如果您希望它们像这样一起出现，则所有较小的 div 都需要在一个容器中，而不是每个都在自己的容器中。

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
  display: inline-block;
}

.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}

<html>
<head>
<style>

</style>
</head>
<body>

<h1>My Skills</h1>

<div class="container">
  <div class="skills html">10%</div>  

  <div class="skills css">80%</div>

  <div class="skills js">65%</div>

  <div class="skills php">60%</div>
</div>

</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。