如何将div框与彼此相邻的文本对齐

Question

如何将div框和文本放在一起？请检查代码段，预期的div框，右边是文本，每个div框旁边是1行。

＆＃13;

＆＃13;

.foo {

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

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}

＆＃13;

<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于这种情况，Flexbox是新的（ish）和令人兴奋的朋友。

您会看到我在课程<span>中添加了一堆.flex，并在css中添加了.flex

.flex {
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}
.foo {
  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.purple {
  background: #461A3F;
  border-radius: 2px;
  border: 0px;
}
.brown {
  background: #C58E4D;
  border-radius: 2px;
  border: 0px;
}
.black {
  background: #34332E;
  border-radius: 2px;
  border: 0px;
}
.orange {
  background: #EC4535;
  border-radius: 2px;
  border: 0px;
}
.blue {
  background: #62a8ea;
  border-radius: 2px;
  border: 0px;
}
.red {
  background: #E2001C;
  border-radius: 2px;
  border: 0px;
}

<span class="flex">
  <span class="flex">
    <div class="foo purple"></div>
    TEST A
  </span>
<span class="flex">
    <div class="foo brown"></div>
    TEST B
  </span>
<span class="flex">
    <div class="foo black"></div>
    TEST C
  </span>
<span class="flex">
    <div class="foo orange"></div>
    TEST D
  </span>
<span class="flex">
    <div class="foo red"></div>
    TEST E
  </span>
</span>

Answer 2

我会用父容器包装它并将其中的div设置为display : inline-block;，请参阅第二个示例;

＆＃13;

＆＃13;

.color-container div { display : inline-block;}

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

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}

＆＃13;

<div class="foo purple"></div><span>TEST A</span>
<div class="foo brown"></div><span>TEST B</span>
<div class="foo black"></div><span>TEST C</span>
<div class="foo orange"></div><span>TEST D</span>
<div class="foo red"></div><span>TEST E</span>



<div class="color-container">
    <div class="foo purple"></div>TEST A
</div>
<div class="color-container">
    <div class="foo brown"></div>TEST B
</div>
<div class="color-container">
    <div class="foo black"></div>TEST C
</div>
<div class="color-container">
    <div class="foo orange"></div>TEST D
</div>
<div class="color-container">
    <div class="foo red"></div>TEST E
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将show inline-block添加到foo类，如下所示

    .foo {

  width: 30px;
  height: 30px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
  display:inline-block
}

这里是示例输出in Codepen

输出

Answer 4

而不是float，请将其显示为inline-block。

.foo {
  display:inline-block;
}

Answer 5

如果您使用float:left或display:inline-block，您将获得此结果

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

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}

<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E

因此，如果你想让不同行中的所有div在每个div之后使用一个清晰​​的div，或者只是换入新的div。我在这里使用明确的div。

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

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}

.clear {
  clear:both;
}

<div class="foo purple"></div>TEST A <div class="clear"></div>
<div class="foo brown"></div>TEST B <div class="clear"></div>
<div class="foo black"></div>TEST C <div class="clear"></div>
<div class="foo orange"></div>TEST D <div class="clear"></div>
<div class="foo red"></div>TEST E <div class="clear"></div>

Answer 6

这是你想要的吗？

＆＃13;

＆＃13;

.foo {

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

.purple {
  background: #461A3F;
  border-radius:2px;
  border:0px;
}
.brown {
  background: #C58E4D;
  border-radius:2px;
  border:0px;
}
.black {
  background: #34332E;
  border-radius:2px;
  border:0px;
}
.orange {
  background: #EC4535;
  border-radius:2px;
  border:0px;
}
.blue {
  background: #62a8ea;
  border-radius:2px;
  border:0px;
}
.red {
  background: #E2001C;
  border-radius:2px;
  border:0px;
}
.parent div{
   display:inline-block;
}

＆＃13;

<div class = "parent">
<div class="foo purple"></div>TEST A 
<div class="foo brown"></div>TEST B
<div class="foo black"></div>TEST C
<div class="foo orange"></div>TEST D
<div class="foo red"></div>TEST E
</div>

＆＃13;

＆＃13;

＆＃13;

将内容换成div，然后放入display:inline-block。