在段落旁邊顯示圖像
[英]Showing images next to paragraph
問題描述
我正在嘗試將圖像對齊到段落的右邊。 一切正常，但是問題是我希望它“響應”，因為有時根本沒有圖像，所以我希望文本填充白色區域。 另一個要注意的是，有多少張圖片總是不同的。 很難解釋，但我希望你能理解。
這是一個矮人，所以您可以嘗試一些。 在插入器中，它工作正常，但如果下一張幻燈片沒有圖像，則空白區域很大。
HTML代碼：
<body>
<div>
<div class="slideHeader">
<img align="left" style="padding-right: 20px;" src="https://cdn3.colorlib.com/dazzling/wp-content/uploads/sites/6/2013/03/image-alignment-150x150.jpg">
<h1 style="padding-left: 20px;">Hello world!</h1>
</div>
<div class="slideContent">
...
</div>
<div class="slideImages">
<div>
<img src="http://revistasindromes.com/images/100x100.gif">
</div>
<div>
<img src="http://revistasindromes.com/images/100x100.gif">
</div>
</div>
</div>
</body>
CSS代碼：
body {
margin: 0;
padding: 0;
}
.slideHeader {
background-color: blue;
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 100%;
}
.slideContent {
top: 150px;
position: absolute;
padding-left: 25px;
padding-right: 150px;
background-color: white;
}
.slideImages {
position: absolute;
top: 150px;
right: 25px;
}
有圖像時如何顯示的示例：
沒有圖像時如何顯示的示例：
（一直到右邊，沒有空格）
3 個解決方案
解決方案1
2 已采納 2015-12-07 09:59:49
無需使用position: absolute; 每次。
下面是更新的代碼：
HTML：
<div>
<div class="slideHeader">
<img align="left" style="padding-right: 20px;" src="https://cdn3.colorlib.com/dazzling/wp-content/uploads/sites/6/2013/03/image-alignment-150x150.jpg">
<h1 style="padding-left: 20px;">Hello world!</h1>
</div>
<div class="slideImages">
<div>
<img src="http://revistasindromes.com/images/100x100.gif">
</div>
<div>
<img src="http://revistasindromes.com/images/100x100.gif">
</div>
</div>
<div class="slideContent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>
CSS：
* {
margin: 0;
padding: 0;
}
.slideHeader {
background-color: blue;
height: 150px;
width: 100%;
}
.slideContent {
padding-left: 25px;
}
.slideImages {
float:right;
padding:10px;
}
解決方案2
0 2015-12-07 09:59:57
如果要使內容彼此環繞，請使用float而不是絕對定位。
.slideContent {
padding-left: 25px;
padding-right: 25px;
background-color: white;
overflow: hidden;
}
.slideImages {
float: right;
}
解決方案3
0 2015-12-07 10:19:43
您可以在下面使用此代碼：
if ($('.slideImages').lenght) {
// code here if slideimage have
}
else {
// code here if slideimage don't have
}
段落未顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.