Question

我希望有这样的东西：

================================
====IMAGE==============TEXT=====
================================

我用过：

.menu {
    background-color: red;
    padding: 40px;
    text-align: right;
}
.menu img {
    float: left;
}

结果：

================================
=======================TEXT=====
====IMAGE=======================

这是做我想要的最好方法吗？谢谢！

Answer 1

您需要将图像放在标记的第一位。 Float会使内联项目环绕某些内容，但只包含在标记中之后的内联项目。

Answer 2

我认为您必须在文本中使用行高和高度，并为菜单设置宽度，例如：

<div class="menu">
   <div class="img">
      <img src="http://placehold.it/350x50" />
   </div>
   <div class="text">
      <p>your text</p>
   </div>
</div>

.menu {
    background-color: red;
    text-align: right;
    width:100%;
}
.menu img {
    float: left;
}

.menu text {
    float: left;
}

.text p{
    height:50px;
    line-height:50px;
}

DEMO

Answer 3

元素没有获得精确的float和width属性。

.menu {
  background-color: red;
  padding: 40px;
  float: right;
  max-width: 40%;
}
.menu img {
  float: left;
  max-width: 60%;
}

现在尝试包装它们并使用

.wrapper {
   display: inline-block;
}

css左边简单的菜单

3 个答案: