html - 另一行下方的第二个字行

标签 html css

我需要两行4个字，一共8个字，比如this

我现在有这样的话 this

我怎样才能让 egg, beak, tea and milk 这几个词在下面排成一行？ 猫勺饭和护照。像那样？

这是我的代码..

body, html {
  margin-left: 10%;
  margin-right: 10%;
  padding: 0px;
  height: 100%;
  font-family: georgia, "Comic Sans MS";
  background-color: #f0f0f0;
}

header {
  height: 5%;
  border-bottom: thick solid grey;
}

.img {
  width: 25%;
  height: 30%;
  background-color:#f0f0f0;
  float: left;
}
.antwoord {
  float: left;
  width: 95%;
  height: 25px;
  background-color: white;
  border-style: solid;
  border-color: #000000;
  border-width: 4px;
}

.move1 {

}
.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}

.word, .word .tekst, .word p {
  display: inline;
}
.word2, .word2 .tekst, .word2 p {

}
.tekst {
  padding: 4.5%;
}

footer {
    border-top: thick solid grey;
    height: 5%;
}

.points {
    float: right;
}
.container {
  width: 100%;
  height: 90%;
}
.igen {
  font-size: 25px;
  font-weight: bold;
}
.sprint {
  float: right;
}
.copyright {
  position: relative;
  bottom: 20px;
  left: 65px;
  font-size: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Words</title>

    <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

  <script>

  </script>

</head>
<body>

<header>
 <span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen">&nbsp;igen</span>
 <span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige:  &nbsp;&nbsp;&nbsp; 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp; 0</span>
</header>

<div class="container">


      <div class="img" id="img1">
          <div class="plaatje" id="plaatje1"><center><img src="img/cat.jpg" alt="cat" width="50%;"></div>
          <div class="move1"><div class="antwoord" id="antwoord1"></div></div>
      </div>
      <div class="img" id="img2">
          <div class="plaatje" id="plaatje1"><center><img src="img/beak.jpg" alt="beak" width="50%;"></div>
            <div class="move2"><div class="antwoord" id="antwoord2"></div></div>
      </div>
      <div class="img" id="img3">
          <div class="plaatje" id="plaatje3"><center><img src="img/spoon.jpg" alt="spoon" width="50%;"></div>
          <div class="move3"><div class="antwoord" id="antwoord3"></div></div>
      </div>
      <div class="img" id="img4">
          <div class="plaatje" id="plaatje4"><center><img src="img/milk.jpg" alt="milk" width="50%;"></div>
          <div class="move4"><div class="antwoord" id="antwoord4"></div></div>
      </div>
      <div class="img" id="img5">
          <div class="plaatje" id="plaatje5"><center><img src="img/egg.jpg" alt="egg" width="50%;"></div>
          <div class="move5"><div class="antwoord" id="antwoord5"></div></div>
      </div>
      <div class="img" id="img6">
          <div class="plaatje" id="plaatje6"><center><img src="img/thee.jpg" alt="tea" width="50%;"></div>
          <div class="move6"><div class="antwoord" id="antwoord6"></div></div>
      </div>
      <div class="img" id="img7">
          <div class="plaatje" id="plaatje7"><center><img src="img/meel.jpg" alt="meel" width="50%;"></div>
          <div class="move7"><div class="antwoord" id="antwoord7"></div></div>
          </div>
          <div class="img" id="img8">
              <div class="plaatje" id="plaatje8"><center><img src="img/passport.jpg" alt="passport" width="50%;"></div>
          <div class="move8"><div class="antwoord" id="antwoord8"></div></div>
          </div>

<div class="answers">
<div class="word" id="word1">
  <div class="tekst" id="tekst1"> <p>Cat</p> </div>
</div>
<div class="word" id="word2">
  <div class="tekst" id="tekst2"> <p>spoon</p> </div>
</div>
<div class="word" id="word3">
  <div class="tekst" id="tekst3"> <p>meal</p> </div>
</div>
<div class="word" id="word4">
  <div class="tekst" id="tekst4"> <p>passport</p> </div>
</div>
<div class="word2" id="word5">
  <div class="tekst" id="tekst5"> <p>egg</p> </div>
</div>
<div class="word2" id="word6">
  <div class="tekst" id="tekst6"> <p>beak</p> </div>
</div>
<div class="word2" id="word7">
  <div class="tekst" id="tekst7"> <p>tea</p> </div>
</div>
<div class="word2" id="word8">
  <div class="tekst" id="tekst8"> <p>milk</p> </div>
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> &copy;2013 laerdansk / FC-Sprint&sup2; Leerbedrijf bronnen </span></center>
</footer>

</body>
</html>

最佳答案

如果你想保留你的 html 结构，你可以使用这个例子: 

.answers .word, .answers .word2{
  float: left;
  padding: 3px;
  width: 100px;
}

.answers .word2:nth-child(5){
  clear:left;
  color: red;
}
<div class="answers">
  <div class="word" id="word1">
    <div class="tekst" id="tekst1"> <p>Cat</p> </div>
  </div>
  <div class="word" id="word2">
    <div class="tekst" id="tekst2"> <p>spoon</p> </div>
  </div>
  <div class="word" id="word3">
    <div class="tekst" id="tekst3"> <p>meal</p> </div>
  </div>
  <div class="word" id="word4">
    <div class="tekst" id="tekst4"> <p>passport</p> </div>
  </div>
  <div class="word2" id="word5">
    <div class="tekst" id="tekst5"> <p>egg</p> </div>
  </div>
  <div class="word2" id="word6">
    <div class="tekst" id="tekst6"> <p>beak</p> </div>
  </div>
  <div class="word2" id="word7">
    <div class="tekst" id="tekst7"> <p>tea</p> </div>
  </div>
  <div class="word2" id="word8">
    <div class="tekst" id="tekst8"> <p>milk</p> </div>
  </div>
</div>

请注意，我用红色标记了您的第五个元素，它打破了新行中的内容。

但我建议您将行内容包装在单个容器中，因为它更易于维护和阅读。

请参阅下面的代码段。

.my-row{
  clear: both;
}
.answers .word, .answers .word2{
  float: left;
  padding: 3px;
  width: 100px;
}
<div class="answers">
  <div class="my-row"> <!-- ADDED WORD CONTAINER -->
    <div class="word" id="word1">
      <div class="tekst" id="tekst1"> <p>Cat</p> </div>
    </div>
    <div class="word" id="word2">
      <div class="tekst" id="tekst2"> <p>spoon</p> </div>
    </div>
    <div class="word" id="word3">
      <div class="tekst" id="tekst3"> <p>meal</p> </div>
    </div>
    <div class="word" id="word4">
      <div class="tekst" id="tekst4"> <p>passport</p> </div>
    </div>
  </div>
  <div class="my-row"> <!-- ADDED WORD CONTAINER -->
    <div class="word2" id="word5">
      <div class="tekst" id="tekst5"> <p>egg</p> </div>
    </div>
    <div class="word2" id="word6">
      <div class="tekst" id="tekst6"> <p>beak</p> </div>
    </div>
    <div class="word2" id="word7">
      <div class="tekst" id="tekst7"> <p>tea</p> </div>
    </div>
    <div class="word2" id="word8">
      <div class="tekst" id="tekst8"> <p>milk</p> </div>
    </div>
  </div>
</div>

关于html - 另一行下方的第二个字行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35289788/

上一篇：html - 显示隐藏文本时如何防止表格行重新调整大小？

下一篇：javascript - 如何使用 CSS/jQuery 将一个元素相对于另一个元素定位

相关文章：

javascript - 自己设计的切换按钮在大量使用后会减慢我的电脑速度

javascript - Cloud9 IO 禁用键绑定(bind)或 Cloud9 替代方案

javascript - 我已经使用append添加了HTML代码，但是这个新代码不再执行javascript

html - 输入元素在获得焦点时覆盖按钮

javascript - 根据其中一个兄弟的文本内容选择兄弟dom元素

css - 在 Ruby on Rails 中使用 slider 输入出生日期

php - html 中的表单没有重定向到 php

javascript - 除非单击另一个链接，否则转到容器中的第一个链接

javascript - 调用函数将文本附加到 div 不会执行任何操作

javascript - 幻影文本 - 如何在文本框中显示微弱的文本

©2024 IT工具网  联系我们