0

テキストの右側に画像を浮かせる必要があります。Div とテキストの両方が多数の DIV に含まれており、HTML を変更することはできず、CSS のみを変更します。

これは簡単だと思ったのですが、なぜか理解できませんでした。これはレスポンシブ サイトであるため、含まれる要素は固定幅でなければなりません。

http://codepen.io/anon/pen/cgznB

<div>
  <div>
    <div>
      <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. </p>
   </div>
  </div>
</div>



<div class="image-cont">
  <div>
    <div>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRMFGfVlnjbzD3dekwhIZ8yPYCzYuKInbzRNc9hU5doTPsPI51a" />
    </div>
  </div>
</div>

.image-cont {
  float: right;
}
div {
  display: inline;
}

更新-次の方法でこれを実現できますが、画像を全幅にしてテキストだけを流動的にするのではなく、

.image-cont {
  float: left;
  width:30%;
}
div > div > div {
  float: left;
  width:70%;
}
4

2 に答える 2

2

この CSS を使用して問題を解決できます。

.image-cont {
  float: left;
  width:30%;
}
div > div > div {
  float: left;
  width:70%;
}
于 2013-10-30T15:34:02.243 に答える
0

これはどうですか？

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​
于 2013-10-30T15:41:32.593 に答える