html - 为什么我的 Div 元素不能保持一致？

Question

我浏览了论坛，似乎尝试了所有与 div 布局相关的建议。我正在尝试获取两行元素，如下所示:第 1 行 - 数字 > 图像 > 文本。第 2 行 -(空格将第二行向右移动与上图相同的像素数)> 数字 > 图像 > 文本。

这是我到目前为止尝试过的代码:

@import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

body {
  background-color: #f3eedd;
  width: 750px;
  overflow: scroll;
  overflow-x: hidden;
}

h1 {
  font-family: 'Londrina Sketch', cursive;
  color: #c13e18;
  font-size: 50px;
  text-align: center;
  margin: 0px 30px 0px 30px;
}

h2 {
  font-size: 20px;
  color: #c13e18;
  margin: 10px 30px 10px 30px;
}

h3 {
  font-size: 20px;
  margin: 30px 30px 0px 30px;
}

h4 {
  text-align: center;
}

p {
  font-size: 20px;
  margin: 0px 30px 0px 30px;
}

.choose {}

.number {
  display:inline-block;
  float:left;
}

.choose-image {
  display: inline-block;
  float: left;
}

.choose-text {
  display: inline-block;
  vertical-align: top;
  float: left;
}

.customise {} 

.empty-left {
  display: inline-block;
  width: 300px;
  overflow: hidden;
}

.customise-image {
  display: inline-block;
}

.customise-text {
  display: inline-block;
  vertical-align: top;
}

<h1>FROM BEGINNING TO END</h1>
<hr>
<h2>How many? What size? How old? When and why? How much? 
    If you’d like to learn more about group sizes, room dimensions, prices & age limits … this section must have your answer! However if you can’t find it, please don’t hesitate to drop us a line!</h2>
<hr>
<!-- choose -->
<div class="choose">
  <div class="number">
    <h4>1</h4>
  </div>
  <div class="choose-image">
    <img src="http://www.challenge-the-box.com/wp-content/uploads/choose.png" alt="" />
  </div>
  <div class="choose-text">Choose text content goes here</div>
</div>​
<div class="customise">
  <div class="empty-left"></div>
  <div class="number">
    <h4>2</h4>
  </div>
  <div class="customise-image">
    <img src="http://www.challenge-the-box.com/wp-content/uploads/customise.png" alt="" />
  </div>
  <div class="customise-text">Customise text content goes here</div>
</div>

谢谢!

Answer 1

你打错了:

.number (
display: inline-block;
float: left;
}

更改为:

.number {
    display: inline-block;
    float: left;
    }

改正后，我认为它看起来不错。

在您的网站上，更改此设置:

.customise {
    float: left;
    width: 100%;
}

.choose {
    float: left;
    width: 100%;
}

对此:

.customise {
        float: left;
        width: 50%;
 }

 .choose {
       float: left;
       width: 50%;
  }