how to place last div into right top corner of parent div? (css)

前端未结

关注

 5  1050

迷失自我

Can I somehow use CSS to place the block2 in top right corner of block1?

Context :

block2

相关标签:

5条回答

时光取名叫无心

2020-12-14 05:56

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...

0 讨论(0)

心在旅途

2020-12-14 06:02

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%);
}

0 讨论(0)

有刺的猬

2020-12-14 06:09

.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.

0 讨论(0)

天涯浪人

2020-12-14 06:11
```
 <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...
0 讨论(0)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2020-12-14 06:11

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>

0 讨论(0)