尝试将 3 个图像浮动在另一个下方并将文本浮动到它们的右侧答案

【问题标题】：Trying to float 3 images one underneath the other and float text to the right of them尝试将 3 个图像浮动在另一个下方并将文本浮动到它们的右侧
【发布时间】：2016-01-21 20:04:24
【问题描述】：

我无法将 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;
}

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

【问题讨论】：

标签： css css-float floating

【解决方案1】：

您需要做的是浮动 2 个父 div .left 和 .right 而不是其中的内容。

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

CSS：

img{
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 5px;
}
.left {
  width: 60%;
  float: left;
}    
.right{
    padding: 10px;
    width: calc(40% - 20px);
    float: right;
}

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

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

【讨论】：

【解决方案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>

【讨论】：