图像旁边的文本框

Question

我想在图像旁边放一个橙色框，如下所示：

我知道如何添加图片和橙色框，但我不明白如何让它们彼此相邻。您可以在下面找到我的HTML和CSS。

＆＃13;

＆＃13;

.wrapper {
  width: 1000px;
  margin: 0 auto;
}

.content {
  height: 1000px;
  width: 1000px;
}

.image {
  float: left;
}

.box {
  float: right;
}

＆＃13;

<div class="wrapper">
  <div class="contents">
    <div>
      <p>Actualmente se encuentra en:</p>
      <p>
        <a href="index.html">Lion</a>
        <p>
    </div>
    <div class="content">
      <div class="image">
        <img src="http://7art-screensavers.com/screenshots/animals/lying-lion.jpg" alt="Lion">
      </div>
      <div class="box">
        <h2>León de Áfric</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p>
        <p>
          <a href="elephant.html">Siguiente »</a>
        </p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我使用flexbox根据需要对齐框并移除浮动。

.wrapper{
	width:1000px;
	margin:0 auto;
}

.content{
	height:1000px;
	width:1000px;
  display: flex;
  justify-content: flex-start;
}

<div class="wrapper">
  <div class="contents">
    <div>
      <p>Actualmente se encuentra en:</p>
      <p>
        <a href="index.html">Lion</a>
        <p>
    </div>
    <div class="content">
      <div class="image">
        <img src="http://placehold.it/200" alt="Lion">
      </div>
      <div class="box">
        <h2>León de Áfric</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p>
        <p>
          <a href="elephant.html">Siguiente »</a>
        </p>
      </div>
    </div>
  </div>
</div>

Answer 2

试试这个：

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabbed-content">

  <ul class="tab">
    <li class="nav-one"><a href="#featured" class="current">Featured</a> </li>
    <li class="nav-two"><a href="#core">Core</a></li>
    <li class="nav-three"><a href="#jquerytuts">jQuery</a></li>
    <li class="nav-four last"><a href="#classics">Classics</a></li>
  </ul>

  <div class="list-wrap">

    <ul id="featured">

    </ul>

    <ul id="core" class="hide">

    </ul>

    <ul id="jquerytuts" class="hide">

    </ul>

    <ul id="classics" class="hide">

    </ul>

  </div>

</div>

＆＃13;

.wrapper{
  width:1000px;
  margin:0 auto;
}

.content{
  height:1000px;
  width:1000px;
}

.image{
  float:left;
  width:60%;
}
.image img{
  max-width:100%;
}
.box{
  float:right;
  width:40%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用flex获取

＆＃13;

＆＃13;

.wrapper {
  width: 1000px;
  margin: 0 auto;
}

.content {
  display: flex;
  justify-content:flex-start;
}

.image {
  flex: 8 0 0;
}

.box {
  flex: 2 0 0;
  background: orange;
  padding:0 10px;
}

＆＃13;

<div class="wrapper">
  <div class="contents">
    <div>
      <p>Actualmente se encuentra en:</p>
      <p>
        <a href="index.html">Lion</a>
        <p>
    </div>
    <div class="content">
      <div class="image">
        <img src="http://7art-screensavers.com/screenshots/animals/lying-lion.jpg" alt="Lion">
      </div>
      <div class="box">
        <h2>León de Áfric</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nemo. Consequatur quod rerum reiciendis, laborum, ex, accusamus atque fugiat dicta aperiam commodi adipisci impedit animi. Non impedit, reprehenderit eius dolor.</p>
        <p>
          <a href="elephant.html">Siguiente »</a>
        </p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;