試圖浮動3個圖像在另一個下方，並將文本浮動到其右側

我在將3個圖像的一個放在另一個的頁面左側並將文本浮動到右側時遇到問題。我一直堅持了2天，我不得不在不更改HTML的情況下解決此問題。試圖浮動3個圖像在另一個下方，並將文本浮動到其右側

我的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/#

來源

2016-01-21 MyTheoryIs

找到你需要做的是浮動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屬性（除非您使用顯示：彎曲）

這裏是工作提琴：https://jsfiddle.net/ggw7xy5s/3/

來源

2016-01-22 01:34:35

也許你是後一個這樣的解決方案：

.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> 
 
\t <aside class="left"> 
 
\t \t <a><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg"></a> 
 
\t \t <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> 
 
\t \t <a><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"></a> 
 
\t </aside> 
 
\t <section class = "right"> 
 
\t \t <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>

來源

2016-02-01 00:05:45 Trix

試圖浮動3個圖像在另一個下方，並將文本浮動到其右側

回答

相關問題