Как разместить изображение и текст рядом с другим изображением в HTML / CSS?

Question

Как разместить изображение и текст рядом с другим изображением в HTML / CSS?

0

Я пытаюсь разместить изображение и текст рядом с другим изображением. Если вы хотите посмотреть, что я имею в виду, посмотрите здесь:

Я пытался использовать поплавки и прочее, но, похоже, это не работает. Вот мой код:

.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>

rashidx 18 май 2014, в 17:49

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Eoin2211 · Answer 1 · 2014-05-18T14-22-00.000Z

Это то, что вы хотите?

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

 }

user3631948 · Answer 2 · 2014-05-18T13-14-00.000Z

Ну вот,

.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/