对齐图中的元素

Question

我的硬件有问题。我无法在左侧对齐 2 个元素 https://jsfiddle.net/tkjxLfjy/ 这是代码，我尝试了 float:left 之类的方法但没有用...所以你能帮我把仪表和文字放在下面吗图片（黑色方块）？

Answer 1

Elements after a floating element will flow around it. To avoid this, use the clear property.

将 Clear:both 添加到 div。 image 有 float:left 所以下一个元素位于它后面。

figure div
{
    clear: both;
}

Answer 2

您可以删除 float:left 并向图像添加 display: block

基本上display: block 保留元素的整行，这样就不会在它旁边设置其他元素，除非它定位.

这是一个fiddle

Answer 3

你应该这样尝试-

.clr{
  clear:both
}
body {
 font-family: serif;
 height:100%;
 width: 100%;
}

#container {
 width: 650px;
 border-radius: 10px;
 height: 280px;
 background-color: pink;
}
.header {
text-align: center;
position:relative;
top: 15px;
}
/* Figure one */
figure{
 float: left;
}
img {
 width: 150px;
 height: 150px;
 background: black;
 
}

meter {
 width: 90px;
}
.meter-col{
 float: left;
 
}

<div id="container">
 <div class="header">
  <h2>Profile</h2>
 </div>
  
 <figure>
  <figcaption>User: Kent</figcaption>
  <img src="avatar.png" />
 </figure>
 <div class="meter-col">
  <div>Profile completed: 60%</div>
  <meter value="60" min="0" max="100">2 out of 10</meter>
 </div>
    <div class="clr"></div> 
</div>

希望对你有帮助。

Answer 4

<div id="container">
    <div class="header">
        <h2>Profile</h2>
    </div>
    <figure>
        <figcaption>User: Kent</figcaption>
        <img src="avatar.png" />
        <div>
        Profile completed: 60%
        <meter value="60" min="0" max="100">2 out of 10</meter>
        </div>
    </figure>

</div>

不需要其他更改，因为标签具有默认的 "block" 行为。

Answer 5

我改变了一些东西。我还更新了一些东西 HTML5 （首选）。我将所有内容更改为显示块，并将所有内容所在的 div 更改为 float: left。 JS fiddle link 下面。

https://jsfiddle.net/tkjxLfjy/6/

HTML:

<body>
 <div id="container">
  <header>
   <h2>Profile</h2>
  </header>
<figure>
 <figcaption>User: Kent</figcaption>
 <img src="avatar.png" />
 <label for="meter">Profile completed: 60%</label>
 <meter name="meter" value="60" min="0" max="100">2 out of 10</meter>
</figure>
</div>
</body>

CSS:

body {
    font-family: serif;
    height:100%;
    width: 100%;
}
#container {
    width: 650px;
    border-radius: 10px;
    height: 280px;
    background-color: pink;
    float: left;
}
header {
    text-align: center;
    position:relative;
    top: 15px;
}
/* Figure one */
 img {
    width: 150px;
    height: 150px;
    background: black;
    display: block;
}
meter {
    float: left;
    width: 90px;
}

对齐图中的元素

Align elements in a figure

html

css

image

figure