在列内水平对齐 div

Question

我想我遗漏了一些明显的东西。在我的滑块下，我有 3 个框，每个框包含 3 个元素。

文字
JPG
嵌入视频

文本和 jpg 应在同一行，视频应排在正下方。

所有 3 个框应水平均匀分布在该列中。

这是我当前的输出：

http://test.completesources.com/fitnesspro/

这是我的代码：

http://jsbin.com/qucewa/edit?html,css,output

我只是在学习 webdev 并尝试复制一个站点作为练习。我想如果我能让这些盒子工作，我就会拥有网站的其余部分。

谢谢！

Answer 1

尝试添加 css

    .box {
     background: blue;
     margin: 5px;
     /* width: 15%; */
     display: inline-block;
     overflow: hidden;
    }

Answer 2

尝试合并 table 元素，如下所示：

<div class="box"> 
  <div class="break"></div><table>
    <tbody>
      <tr>
        <td><div class="box_text">Training Tips</div></td>
        <td><img class="barbell" src="images\barbell.jpg"></td>
      </tr>
      <tr>
     <td colspan="2"> <iframe width="247" height="247" src="https://www.youtube.com/embed/u_iG_DWLdN8?showinfo=0" frameborder="0" allowfullscreen="" style="width: 100%"></iframe></td>
      </tr>
 </tbody>
  </table>
</div>

Answer 3

试试这个：

.box {
  background: blue;
  margin: 5%;
  width: auto;
  display: block;
  float: left;
}

.box_text {
  color: #F3D000;
  font-weight: bold;
  font-size: 1.5em;
  float: left;
  margin-left: 1%;
  display: inline-block;
}

并提供您的 iframe

iframe {
  display: inline-block;
  width: 100%;
  margin: 0;
  float: left;
}

Answer 4

使文字和图片在同一行；使用垂直对齐属性。在 http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

阅读更多相关信息

CSS:

.box_text {
color:#F3D000;
font-weight:bold;
font-size:1.5em;
vertical-align: middle;
}

HTML:

    <div class="box_text">
        Training Tips<img class="barbell" src="images\barbell.jpg">
    </div>
    <div class="break"></div>

并使框 spaced 水平横跨列，使用 float:left。

.box {
background:blue;
margin:5%;  
width:21.333%;
float:left;
}

横向的总边距和宽度 div 必须等于 100 或 99.999% 才能使方框均匀 spaced。总计 space = box1 + box2 + box3 =(5%+21.333%+5%) + (5%+21.333%+5%) + (5%+21.333%+5%) = 99.999%。如果您减少边距，请确保增加宽度，然后将其加起来大约为 100%。

顺便说一句，我刚刚看到你把你的iframe宽度设置为20%，当稍后水平装箱spaced时，iframe的20%宽度将根据.frame的宽度计算。盒子。如果您希望 iframe 宽度与框大小相同，请将大小增加到 100%。示例：

iframe {
  //display:inline-block;
  width:100%;
}

或者，如果您希望 iframe 具有一定的宽度，示例如下：

iframe {
  //display:inline-block;
   margin-right: 10%;
   margin-left : 10%;
   width:80%;
}

在列内水平对齐 div

Horizontally aligning divs inside a column

html

css

alignment