Question

所以我想对齐这三个元素，使它们在页面上并排，首先是“1”跟随图像，然后是“文本”。我根本无法解决如何做到这一点有人可以提供帮助吗？

我的HTML：

<div class="chart-game">
<div id="1">
    <h1>1</h1>
</div>
<div id="1img">
    <img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg">
</div>
<div id="1p">
    <p>Text</p>
</div>    
</div>

我的CSS：

.chart-game img {
width:100px;
height:100px;
}
#1 {
display:inline-block;
margin-right:10px;
}
#1img {
display:inline-block;
margin-right:10px;
}
#1p {
display:inline-block;
}

非常感谢任何帮助，谢谢。

Answer 1

将ID 的名称更改为包含字符串开头的任何数字。代码工作正常

新HTML

<div class="chart-game">
<div id="header">
    <h1>1</h1>
</div>
<div id="image">
</div>
<div id="text-header">
    <p>Text</p>
</div>    
</div>

和CSS

.chart-game img {
    width:100px;
    height:100px;
}
#header {
  display:inline-block;
  margin-right:10px;
}
#image {
    width: 50px;
    height:50px;

    background : #dedede;
    display:inline-block;
    margin-right:10px;
}
#text-header {
    display:inline-block;
}

Answer 2

您必须使用floats

<强> CSS

.chart-game img {
    width:100px;
    height:100px;
    float:left;
}
#1 {
    display:inline-block;
    margin-right:10px;      
}
#1img {
    display:inline-block;
    margin-right:10px;
    float:left;
}
#1p {
    display:inline-block;
}
h1{
    float:left;
}
p{
    float:left;
}

允许其他类标识符以数字开头，但ID标识符不是。

fiddle

Answer 3

尝试this：

html：

<div class="chart-game">
        <div class="chart-game-inner">
            <h1>1</h1>
        </div>
        <div class="chart-game-inner">
            <img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg" />
        </div>
        <div class="chart-game-inner">
            <p>Text</p>
        </div>   
    </div>

的CSS：

.chart-game img {
    width:100px;
    height:100px;
}
.chart-game-inner {
    display : inline-block;
}

将3个元素并排排列

3 个答案: