对齐图中的元素答案

【问题标题】：Align elements in a figure对齐图中的元素
【发布时间】：2016-02-01 12:03:27
【问题描述】：

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

【问题讨论】：

标签： html css image figure

【解决方案1】：

根据w3school：

浮动元素之后的元素将围绕它流动。为了避免这种情况，使用 clear 属性。

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

Jsfiddle

figure div
{
    clear: both;
}

【讨论】：

【解决方案2】：

您可以删除float:left 并将display: block 添加到图像中

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

这是fiddle

【讨论】：

【解决方案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>

希望对你有帮助。

【讨论】：

【解决方案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>

不需要其他更改，因为标签具有默认的“阻止”行为。

【讨论】：

【解决方案5】：

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

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

【讨论】：