[英]Positioning, Margin, CSS
我有兩個由<div>
包圍的圖像,但要創建一個選擇器id =“ image”。 但是我想放置從頁面流中取出的第一張圖像,該圖像的左邊緣與父元素的左邊緣齊平。 在第二張圖片上,我希望它的定位右邊界與父元素的左邊界齊平。 有什么建議么?
Before:
_
| |
|_|
_
| |
|_|
Hello world
After:
_ _
| | Hello world | |
|_| |_|
我在想我的CSS應該是這樣的:
#image-left img {
position: absolute;
margin-left: 0;
}
#image-right img {
position: absolute;
margin-right: 0;
}
我的HTML是:
<div id="image-left"><img src="image/logo.jpg"></div>
<div id="image-right"><img src="image/logo.jpg"></div>
您還必須設置父位置屬性:
#parent {
position:relative;
}
並設置left和right屬性
#image-left img {
position: absolute;
left: 0;
}
#image-right img {
position: absolute;
right: 0;
}
請注意,中間的任何文本都必須在左右兩側留有一定的空白,以免與浮動圖像重疊
這是一種使用CSS float
的方法,將圖像放置在其父容器的左側和右側,並在它們之間添加一些文本:
<div id="container">
<div id="image-left">
<img src="image/logo.jpg" />
</div>
Hello World
<div id="image-right">
<img src="image/logo.jpg" />
</div>
</div>
div#container {
width:50%;
border:1px solid #000;
text-align:center;
}
#image-left {
float:left;
}
#image-right {
float:right;
}
為了簡化:
<div id="container">
<img id="image-left" src="image/logo.jpg" />
Hello World
<img id="image-right" src="image/logo.jpg" />
</div>
div#container {
width:50%;
border:1px solid #000;
text-align:center;
}
img#image-left {
float:left;
}
img#image-right {
float:right;
}
<div class="container">
<div class="image-left"><img src="image/logo.jpg"></div>
<div class="TextContent">Hello world</div>
<div class="image-right"><img src="image/logo.jpg"></div>
</div>
.container div {
float:left;
}
.container div img {
display:box;
}
.container div.TextContent {
margin-right:10px;
margin-left:10px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.