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这样的元素：

＆＃13;

<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>

＆＃13;

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

使文字和图像在同一条线上; 使用vertical-align属性。在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>

并使框在水平间隔开，使用float：left。

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

水平div的总边距和宽度必须等于100或99.999％才能使盒子均匀分布。总空间= box1 + box2 + box3 =（5％+ 21.333％+ 5％）+（5％+ 21.333％+ 5％）+（5％+ 21.333％+ 5％）= 99.999％。如果减小边距，请确保增加宽度，然后将其总计大约增加到100％。

顺便说一下，我刚刚看到你将你的iframe宽度设置为20％，当盒子水平间隔开时，iframe的20％宽度将从.box的宽度计算出来。如果希望iframe宽度与框大小的大小相同，请将大小增加到100％。例如：

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

或者，如果你想让iframe达到一定的宽度，可以举例如下：

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

水平对齐列内的div

4 个答案: