'div'要素では、他のすべての項目を右揃えにしてテキストを左揃えにする方法はありますか？

Question

それは、これは私が今

<style> 
    .thread { 
     background-color: skyblue; 
     height: 50px; 
     width: 90%; 
     align-self: center; 
     text-align: end; 
     display: inline-block; 
     border-radius: 6px; 
     position: relative; 
    } 

    .header { 
     width: fit-content; 
     display: inline-block; 
     align-self: right; 
    } 

    .arrow { 
     display: inline-block; 
     vertical-align: bottom; 
     height: 50%; 
    } 

    .titletext { 
     display: inline-block; 
     text-align: left; 
    } 
</style> 
<div class="thread"> 
    <p class="titletext">Title</p> 
    <div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div> 
</div> 

It appears like this

And I'm trying to achieve this

申し訳まで持っているものです。..タイトルは右に左し、ドロップダウンの設定メニューの矢印で表示された後のよう ですコードがあまりにもランダムである場合、またはいくつかの行が不要な場合でも、私は検索していて、多くのものを試しているので、今のところそれがあります。

Answer 1

矢印にfloat:right、ヘッダー全体にtext-align:leftを使用できます。

.thread { 
 
     background-color: skyblue; 
 
     height: 50px; 
 
     width: 90%; 
 
     text-align: left; 
 
     display: inline-block; 
 
     border-radius: 6px; 
 
     position: relative; 
 
    } 
 

 
    .header { 
 
     display: inline-block; 
 
     float: right; 
 
    } 
 

 
    .arrow { 
 
     display: inline-block; 
 
     vertical-align: bottom; 
 
     width: 25px; 
 
     height: auto; 
 
     float: right; 
 
     margin: 12px; 
 
    } 
 

 
    .titletext { 
 
     display: inline-block; 
 
     text-align: left; 
 
    }

<div class="thread"> 
 
    <p class="titletext">Title</p> 
 
    <img class="arrow" onclick="showPopover(this)" 
 
    src="https://image.flaticon.com/icons/png/512/7/7584.png" /> 
 
</div>

Answer 2

ただ単に置くfloat:left;

.thread { 
 
     background-color: skyblue; 
 
     height: 50px; 
 
     width: 90%; 
 
     align-self: center; 
 
     text-align: end; 
 
     display: inline-block; 
 
     border-radius: 6px; 
 
     position: relative; 
 
    } 
 

 
    .header { 
 
     width: fit-content; 
 
     display: inline-block; 
 
     align-self: right; 
 
     padding:15px 10px; 
 
    } 
 

 
    .arrow { 
 
     display: inline-block; 
 
     vertical-align: bottom; 
 
     height: 50%; 
 
    } 
 

 
    .titletext { 
 
     display: inline-block; 
 
     text-align: left; 
 
     float:left; 
 
     padding-left:10px; 
 
    }

<div class="thread"> 
 
    <p class="titletext">Title</p> 
 
    <div class="header"><img class="arrow" width="20" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div> 
 
</div>

Answer 3

使用you'r class="titletext"のような：

.titletext { 
    position: absolute; 
    top; 
    left: 0; 
} 

Answer 4

あなたはfloatを使用することができますが：のTitleText

<style> 
    .thread { 
     background-color: skyblue; 
     height: 50px; 
     width: 90%; 
     align-self: center; 
     text-align: end; 
     display: inline-block; 
     border-radius: 6px; 
     position: relative; 
    } 

    .header { 
     width: fit-content; 
     display: inline-block; 
     align-self: right; 
    } 

    .arrow { 
     display: inline-block; 
     vertical-align: bottom; 
     height: 50%; 
    } 

    .titletext { 
     display: inline-block; 
     float:left; 
    } 
</style> 
<div class="thread"> 
    <p class="titletext">Title</p> 
    <div class="header"><img class="arrow" onclick="showPopover(this)" src="https://image.flaticon.com/icons/png/512/7/7584.png" /></div> 
</div> 

Answer 5

.titletext { 
    display: inline-block; 
    float: left; 
} 

に残さ