how to place last div into right top corner of parent div? (css)
Can I somehow use CSS to place the block2 in top right corner of block1?
Context :
block2must be the (very) last inside HTML code ofblock1or it could be placed afterblock1. I can't make it the first element inblock1.- Within
block1there could be<p>, images, text and it is beyond my control to know what and how many. - Also I need the
block2to flow.
Code :
.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>Should do it. Assuming you don't need it to flow.
You can simply add a right float to .block2 element and place it in the first position (this is very important).
Here is the code:
<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>
Regards...
<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>
You can clear:both or clear:left depending on the exact context.
Also, you will have to play around with width to get it to work correctly...
If you can add another wrapping div "block3" you could do something like this.
<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>
Displaying left middle and right of there parents. If you have more then 3 elements then use nth-child() for them.
HTML sample:
<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 sample:
.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%);
}
加载中,请稍侯......
精彩评论