Question

我无法将3个img的一个放在我页面左侧的另一个上面，并将文本浮动到右侧。我已经被困2天了，我必须在不改变HTML的情况下解决这个问题。

我的CSS是

img{
    width: 30%;
    height: 240px;
    border: 3px solid #0066ff;
    margin: 5px;
}

.left{
    float: left;
    margin: 0 auto;
}

.right{
    border: 5px solid #00008b;
    padding: 10px;
    width: 40%;
    height: 375px;
    display: inline-block;
    float: right;
}

可以在https://jsfiddle.net/MyTheoryIs/ggw7xy5s/#

找到HTML

Answer 1

你需要做的是浮动2个父div [{1}}＆amp; .left而不是其中的内容。

这也消除了将图像宽度设为30％的需要。

CSS：

.right

注意：使用浮点数会覆盖显示属性（除非您使用display：flex）

这是工作小提琴：https://jsfiddle.net/ggw7xy5s/3/

Answer 2

也许你正在寻找这样的解决方案：

.left, .right{
  box-sizing: border-box;
}
.left{
  width: 30%;
  border: 3px solid #0066ff;
  margin-right: 1%;
  float: left;
}
.left a{
  display: block;
  line-height: 0;
  margin-bottom: 5px;
}
.left a:last-child{
  margin-bottom: 0;
}
.left a img{
  width: 100%;
  height: auto;
}
.right{
  border: 5px solid #00008b;
  padding: 10px;
  width: 69%;
  height: 375px;
  display: inline-block;
  float: right;
}

<main>
	<aside class="left">
		<a><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg"></a>
		<a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"></a>
		<a><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"></a>
	</aside>
	<section class = "right">
		<h2>Watch your Head </h2>
        <p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. </p>
        <p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. </p>
        <p>This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. </p>
    </section>
</main>

试图将3张图像浮动到另一张图像下方并将文本浮动到它们的右侧

2 个答案: