Question

任何人都可以帮我解决这个问题吗？你不能改变HTML结构，但你必须调整CSS，以便在可能的情况下将它放在同一行......

提前致谢！

问题在于：

.description {
    display: inline-block;
    float: left;
}

.description1 {
    display: inline-block;
    float: left;
}

img {
    background-color:#FFF;
    width:40px;
    height:40px;
    display:inline-block;
    border:solid black 1px;
    float: left;
}

编辑：对于将来需要它的人，必须显示文本：块和图像只是浮动，左或右。

Answer 1

从.description1移除浮动，还在描述中添加了填充以改善美感。这是因为你不能像你说的那样改变html部分。

.description {
   float: left;
   padding: 5px 5px 0 0;
}

http://jsfiddle.net/NgfSF/26/

Answer 2

http://jsfiddle.net/NgfSF/25/

.description {
    width: 10%;
}

.description1 {
    width: 90%;
}

如上所述，加上它们时，只要给它们宽度低于100％。相应调整。

Answer 3

将图像放在与您想要的段落相同的div中...给图像一个类并将其设置为样式...您不必将其放在单独的div中

Answer 4

这个怎么样：

.description {
    float: left;
}

img {
    background-color:#FFF;
    width:40px;
    height:40px;
    display:inline-block;
    border:solid black 1px;
    float: left;
}

Answer 5

将css更改为此，

.description {
    float: left;
}

.description1 {
}

img {
    background-color:#FFF;
    width:40px;
    height:40px;
    display:inline-block;
    border:solid black 1px;
    float: left;
}

http://jsfiddle.net/NgfSF/29/

对齐元素HTML / CSS浮动或显示：内联块

5 个答案: