Question

我的硬件出了问题。我不能在左侧对齐2个元素https://jsfiddle.net/tkjxLfjy/这是代码，我尝试了float:left之类的东西，但没有用......所以你可以帮我把仪表和文本放在图片（黑色sqare）？

Answer 1

浮动元素后面的元素将围绕它流动。要避免这种情况，使用明确的财产。

将div添加到image。 float:left有figure div { clear: both; }所以后面的元素就在后面。

sounds = [SoundLoader.load("sound.wav") for _ in range(10)]
index = 0

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

   typename It2::pointer operator-> () { return v; }
   typename It2::reference operator* () { return *v; }
// ^^^^^^^^^^^^^^

无需进行其他更改＆＃39;因为标签有默认的＆＃34;块＆＃34;行为。

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

对齐图中的元素

5 个答案: