如何在HTML / CSS中将图像和文本放置在另一个图像旁边？

Question

我正在尝试将图像和文本放置在另一个图像旁边。 如果您想了解我的意思，请看这里：

7xecD

我尝试使用浮点数和其他东西，但似乎不起作用。 这是我的代码：

.left {float: left;}
.right{float: right;}

<div class="left">
<img src="img/image1.png" />
<p>Text</p>
</div>

<div class="right">
<img src="img/image2.png" />
</div>

Answer 1

这是你想要的吗？

<body>


<div id="Menu">
<img src="image"/>
<h4>Text</h4>


 </div>


 <div id="Container">
 <h4>Content Section</h4>


 </div>



 body, html {
 width:100%;
 height:100%;
 margin:0;
 color:white;
 }


 #Menu  {
 background-color:black;
 height:50%;
 width:25%;
 position:relative;
 top:70px;
 float:left;
  }

 #Container {
 height:50%;
 width:70%;
 background-color:blue;
 position:relative;
 top:70px;
 float:right;

 }

Answer 2

干得好，

.container {
    width:100%;
    height:500px;
}

.left, .right{
    position:relative;
    height:100%;
    width:50%;
    float:left;
}

.img1{
    width:100%;
    height:50px;
}


<div class='container'>
    <div class="left">
        <img src="http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg" alt="img 1" class='img1'/>
        <p>asdf asfd asdf asdf</p>
    </div>
    <div class="right">
        <img src="http://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg" alt="img 1" />
    </div>
</div>

http://jsfiddle.net/qCGuL/

如何在HTML / CSS中将图像和文本放置在另一个图像旁边？

问题描述

2 个解决方案

解决方案1
0 2014-05-18 15:31:36

解决方案2
0 2014-05-18 15:34:51

如何在HTML / CSS中将图像和文本放置在另一个图像旁边？

问题描述

2 个解决方案

解决方案1 0 2014-05-18 15:31:36

解决方案2 0 2014-05-18 15:34:51

解决方案1
0 2014-05-18 15:31:36

解决方案2
0 2014-05-18 15:34:51