[英]how to place last div into right top corner of parent div? (css)
我能以某種方式使用CSS來放置block2中的右上角block1 ？
block2必須是（非常）終於里面的HTML代碼block1或者它可以放置后block1 。 我不能讓它成為block1的第一個元素。block1中可能有<p> 、圖像、文本，我無法控制知道什么和多少。block2來流動。 .block1 { color: red; width: 100px; border: 1px solid green; } .block2 { color: blue; width: 70px; border: 2px solid black; position: relative; }
<div class='block1'> <p>text</p> <p>text2</p> <div class='block2'>block2</div> </div>
.block1 { color: red; width: 100px; border: 1px solid green; position: relative; } .block2 { color: blue; width: 70px; border: 2px solid black; position: absolute; top: 0px; right: 0px; }
<div class='block1'> <p>text</p> <p>text2</p> <div class='block2'>block2</div> </div>
應該做。 假設你不需要它流動。
您可以簡單地向 .block2 元素添加一個正確的浮點數並將其放在第一個位置（這非常重要）。
這是代碼：
<html>
<head>
<style type="text/css">
.block1 {
color: red;
width: 100px;
border: 1px solid green;
}
.block2 {
color: blue;
width: 70px;
border: 2px solid black;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class='block1'>
<div class='block2'>block2</div>
<p>text</p>
<p>text2</p>
</div>
</body>
問候...
<div class='block1'>
<p style="float:left">text</p>
<div class='block2' style="float:right">block2</div>
<p style="float:left; clear:left">text2</p>
</div>
您可以clear:both或clear:left取決於確切的上下文。 此外，您將不得不調整width以使其正常工作......
如果您可以添加另一個包裝 div“block3”，您可以執行類似的操作。
<html>
<head>
<style type="text/css">
.block1 {color:red;width:120px;border:1px solid green; height: 100px;}
.block3 {float:left; width:10px;}
.block2 {color:blue;width:70px;border:2px solid black;position:relative;float:right;}
</style>
</head>
<body>
<div class='block1'>
<div class='block3'>
<p>text1</p>
<p>text2</p>
</div>
<div class='block2'>block2</DIV>
</div>
</body>
</html>
顯示父母的左中間和右。 如果您有超過 3 個元素，則對它們使用 nth-child()。
HTML 示例：
<body>
<ul class="nav-tabs">
<li><a id="btn-tab-business" class="btn-tab nav-tab-selected" onclick="openTab('business','btn-tab-business')"><i class="fas fa-th"></i>Business</a></li>
<li><a id="btn-tab-expertise" class="btn-tab" onclick="openTab('expertise', 'btn-tab-expertise')"><i class="fas fa-th"></i>Expertise</a></li>
<li><a id="btn-tab-quality" class="btn-tab" onclick="openTab('quality', 'btn-tab-quality')"><i class="fas fa-th"></i>Quality</a></li>
</ul>
</body>
CSS 示例：
.nav-tabs{
position: relative;
padding-bottom: 50px;
}
.nav-tabs li {
display: inline-block;
position: absolute;
list-style: none;
}
.nav-tabs li:first-child{
top: 0px;
left: 0px;
}
.nav-tabs li:last-child{
top: 0px;
right: 0px;
}
.nav-tabs li:nth-child(2){
top: 0px;
left: 50%;
transform: translate(-50%, 0%);
}
如何使用滾動條在div的右上角放置一個關閉圖標？
[英]How to place a close icon at the top right corner for div with scroll bar?
如何在標題的右上角放置“ social-media” div？
[英]how to place the “social-media” div in the top right corner of the header?
使用CSS / JavaScript在頁面中所有圖像的右上角動態放置一個按鈕/ div
[英]Dynamically place a button/div on the top right corner of all images in the page using css/javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.