Question

我有以下代码：

＆＃13;

.font_color_white {
  color: white;
}
.font_20px {
  font-size: 20px;
}
.font_weight_bold {
  font-weight: bold;
}
.bg_color_orange {
  background-color: rgb(255, 97, 56);
}
.section_container {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-width: 960px;
  margin-top: 20px;
}
.section_container_inner {
  margin: 0 auto;
  display: block;
  position: relative;
}
.section_block {
  display: block;
  float: left;
  position: relative;
  height: auto;
}
.section_block_header {
  display: block;
  position: relative;
  text-align: center;
  margin-bottom: 5px;
}
.section_block_table {
  display: table;
  position: relative;
}
.section_block_row {
  display: table-row;
  position: relative;
}
.section_block_cell {
  display: table-cell;
  position: relative;
}
.width_960px {
  width: 960px;
}
.height_50px {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}
.margin_top_10px {
  margin-top: 10px;
}
.padding_left_5px {
  padding-left: 5px;
}
.padding_top_minus_5px {
  padding-top: -5px;
}
.display_block {
  display: block;
}
.box_orange {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid rgb(255, 97, 56);
  width: 20px;
  height: 20px;
}

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<div class="section_block_table width_960px">
  <div class="section_block_header height_50px width_960px bg_color_orange">
    <span class="font_color_white font_20px">FAQ</span>
  </div>

  <div class="section_block_row">
    <div class="display_block width_960px margin_top_10px">
      <div class="section_block_cell">
        <div class="box_orange"></div>
      </div>
      <div class="section_block_cell">
        <div class="display_block padding_left_5px font_weight_bold padding_top_minus_5px">
          <span class="font_family_cont_m">What's the best way to get started with archery at Kelly's?</span>
        </div>
        <div class="display_block padding_left_5px ">
          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
          eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我试图让问题与左边的方格完全对齐。所以问题文本和广场看起来好像在同一条线上。试图将填充和边距应用于问题文本块，但根本没有运气。

有人可以确定我做错了吗？

Answer 1

您需要设置table-cell显示元素的垂直对齐方式。

如果您想直接在中间放置方块，可以将其设置为middle：

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

JSFiddle demo

或者您希望它位于顶部，您可以将其设置为top：

.section_block_cell {
    ...
    display: table-cell;
    vertical-align: top;
}

<强> Alternative JSFiddle demo

Answer 2

添加以下CSS修复它：

.section_block_cell:first-of-type {
    float: left;
}

更新了JSFiddle。

这甚至适用于非display: table-cell元素...

Answer 3

不确定您尝试实现的目标...如果您希望您的方框与问题垂直对齐，请参阅上面的答案。

如果你想让弓与第一行垂直对齐，我会使用橙色框的绝对定位，在问题容器上留下左边的填充：

<div class="display_block width_960px margin_top_10px question">
            <div class="box_orange"></div>
                    <p class="font_family_cont_m font_weight_bold">What's the best way to get started with archery at Kelly's?</p>
            <p>
                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
            </p>
        </div>

CSS：

.question {
    position: relative;
    padding-left: 34px;
}

.question p{
    margin: 0;
}

.box_orange {
    position: absolute;
    top: -4px;
    left: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid rgb(255,97,56);
    width: 20px;
    height: 20px;
}

Updated Fiddle

对齐显示内部的元素：单元格

3 个答案: