Question

我想创建三个div，它们分别是彩色的小盒子：

<div class="foo blue"></div>Blue
<div class="foo purple"></div>Purple
<div class="foo wine"></div>Wine

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

这适用于所有内容，除了我需要每个框旁边的文本对齐其各自div的右侧。一切都应该在一行中，文本垂直对齐其div。这只会强制文本超出三个div的范围。什么是将它们连接在一起的合适方式？

jsfiddle：http://jsfiddle.net/vsfu72j8/1/

Answer 1

将float:left替换为：

.foo {
  display: inline-block;
  vertical-align: middle;
}

这里是小提琴：jsfiddle

Answer 2

使用flexbox时，请使用B和inline-flex，但首先需要将元素包装在另一个标记中。

代码段：

＆＃13;

align-items: center;

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul > li {
  display: inline-flex;
  align-items: center;
}
.foo {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.blue {
  background: #13b4ff;
}
.purple {
  background: #ab3fdd;
}
.wine {
  background: #ae163e;
}

＆＃13;

您还可以使用SVG <ul> <li> Blue </li> <li> Purple </li> <li> Wine </li> </ul>来表示您的方块，从而在语义上进行改进。使用spritesheet重用相同的元素。

代码段：

＆＃13;

<rect>

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul > li {
  display: inline-flex;
  align-items: center;
}
.foo {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 5px;
}
.blue {
  color: #13b4ff;
}
.purple {
  color: #ab3fdd;
}
.wine {
  color: #ae163e;
}
.svg-spritesheet {
  display: none;
}

＆＃13;

Answer 3

您必须稍微重新排列HTML结构。我已经使用 CSS Flexbox 来满足您的要求。

请查看以下代码或结帐fiddle。

详细了解CSS Flexbox

＆＃13;

.item-holder {
  display: flex;
}

.item {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.item:last-child {
  margin-right: 0;
}

.foo {
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}

＆＃13;

<div class="item-holder">
  <div class="item">
    <div class="foo blue"></div>
    <div class="text">Blue</div>
  </div>
  <div class="item">
    <div class="foo purple"></div>
    <div class="text">Purple</div>
  </div>
  <div class="item">
    <div class="foo wine"></div>
    <div class="text">Wine</div>
  </div>
</div>

＆＃13;

希望这有帮助！

Answer 4

当你希望你的div表现得像一个表时，你可以使用CSS定义。在某些情况下，我发现它非常直观和少数：

<强> HTML：

<div class="table-row">
  <div class="table-cell">
    <div class="foo blue"></div>
  </div>
  <div class="table-cell">Blue</div>
  <div class="table-cell">
    <div class="foo purple"></div>
  </div>
  <div class="table-cell">Purple</div>
  <div class="table-cell">
    <div class="foo wine"></div>
  </div>
  <div class="table-cell">Wine</div>
</div>

注意div如何嵌套为表结构。

<强> CSS

.table-row{   
    display:table-row; 
} 

.table-cell{   
    display:table-cell; 
    vertical-align:middle;
}

.foo {
   width: 20px;
   height: 20px;
   margin: 5px;
   border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
     background: #13b4ff; 
}

.purple {
    background: #ab3fdd; 
}

.wine {
    background: #ae163e; 
}

http://jsfiddle.net/xzj6eauf/

中心将文本对齐浮动div的右侧

4 个答案: