互いに要素をサイジングする

Question

イメージを含むサイドバー、ページ下部の下にあるボックス、およびその下にあるいくつかのボタンに取り組んでいます。画像とボックスだけで、サイドバーのすべてが同じwidthのままだったが、画像が大きくなったり小さくなったりすると調整されたが、その下にボタンdivが追加された（その中のテキストが一定の長さになる）上記のボックスはサイドバーに引き伸ばされています。

ここで私が持っているコードです：

HTML：

body { 
 
    color: #ffffff; 
 
} 
 
.sidebar { 
 
    position: fixed; 
 
    top: 179px; 
 
    left: 100px; 
 
    min-width: 100px; 
 
    max-width: 120px; 
 
} 
 
.pages { 
 
    background-color: #ffffff; 
 
    width: -moz-calc(100% - 2px); 
 
    width: -webkit-calc(100% - 2px); 
 
    width: calc(100% - 2px); 
 
    height: 30px; 
 
    position: relative; 
 
    left: 0px; 
 
    top: -4px; 
 
    border-left: 1px solid #E2C4FF; 
 
    border-right: 1px solid #E2C4FF; 
 
    border-bottom: 1px solid #E2C4FF; 
 
    text-align: center; 
 
} 
 
.dots { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0%; 
 
    transform: translate(-50%, -70%); 
 
    color: { 
 
    color: Link Color Type 1 
 
    } 
 
    ; 
 
    font-family:'Questrial', 
 
    sans-serif; 
 
} 
 
.custom-links { 
 
    background-color: #000000; 
 
} 
 
#avatar { 
 
    min-width: 100px; 
 
    max-width: 120px; 
 
}

<div class="sidebar" style="background-color:red;"> 
 
    <img id="avatar" src="http://i1380.photobucket.com/albums/ah161/joanwatson/138_zps4tytysv0.png" /> 
 
    <div class="pages"> 
 
    <a href="#" class="page-arrow">«</a> 
 
    <p class="dots"> 
 
     .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;. 
 
    </p> 
 
    <a href="#" class="page-arrow">»</a> 
 
    </div> 
 
    <div class="custom-links"> 
 
    I should size with the image 
 
    </div> 
 
</div>

私はこの問題を解決する方法を誰もが知っていますか？

Answer 1

displayテーブルプロパティを使用すると、最も長いコンテンツで展開される可能性があります。

maxおよびmin-widthは、.sidebarコンテナのdisplay:tableプロパティでは使用できないため、子供に適用する必要があります。

body { 
 
    color:#ffffff; 
 
} 
 
.sidebar { 
 
    /* position: fixed; snippet purpose */ 
 
    display:table; 
 
    top:179px; 
 
    left:100px; 
 
    width:10px;/* dmo set at 10px but could be 0 or 100px */ 
 
} 
 

 
.pages { 
 
    background-color:#ffffff; 
 
    height:30px; 
 
    position:relative; 
 
    left:0px; 
 
    top:-4px; 
 
    border-left: 1px solid #E2C4FF; 
 
    border-right: 1px solid #E2C4FF; 
 
    border-bottom: 1px solid #E2C4FF; 
 
    text-align:center; 
 
} 
 

 
.dots { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0%; 
 
    transform: translate(-50%, -70%); 
 
    color:{color:Link Color Type 1}; 
 
    font-family: 'Questrial', sans-serif; 
 
} 
 

 
.custom-links { 
 
    background-color:#000000; 
 
} 
 

 
#avatar, .custom-links { 
 
    min-width:100px; 
 
    max-width:120px; 
 
}

<div class="sidebar" style="background-color:red;"> 
 
    <img id="avatar" src="http://i1380.photobucket.com/albums/ah161/joanwatson/138_zps4tytysv0.png"/> 
 
    <div class="pages"> 
 
     <a href="#" class="page-arrow">«</a> 
 
    <p class="dots"> 
 
    .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;. 
 
    </p> 
 
     <a href="#" class="page-arrow">»</a> 
 
    </div> 
 
    <div class="custom-links"> 
 
    I should size with the image 
 
    </div> 
 
    </div>

Answer 2

あなたがそうmax-width

のためのより小さい120pxセットがある小さな画像（100px）を使用しているためだmax-width

body { 
 
    color:#ffffff; 
 
} 
 
.sidebar { 
 
    position: fixed; 
 
    top:17px; 
 
    left:100px; 
 
    min-width:100px; 
 
} 
 
.pages { 
 
    background-color:#ffffff; 
 
    height:30px; 
 
    position:relative; 
 
    left:0px; 
 
    top:-4px; 
 
    border-left: 1px solid #E2C4FF; 
 
    border-right: 1px solid #E2C4FF; 
 
    border-bottom: 1px solid #E2C4FF; 
 
    text-align:center; 
 
} 
 
.dots { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0%; 
 
    transform: translate(-50%, -70%); 
 
    color:lime; 
 
    font-family: 'Questrial', sans-serif; 
 
} 
 
.custom-links { 
 
    background-color:#000000; 
 
} 
 
#avatar { 
 
    min-width:100px; 
 
    width: 200px; 
 
}

<div class="sidebar" style="background-color:red;"> 
 
    <img id="avatar" src="http://i1380.photobucket.com/albums/ah161/joanwatson/138_zps4tytysv0.png" /> 
 
    <div class="pages"> 
 
    <a href="#" class="page-arrow">«</a> 
 
    <p class="dots"> 
 
     .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;. 
 
    </p> 
 
    <a href="#" class="page-arrow">»</a> 
 
    </div> 
 
    <div class="custom-links"> 
 
    I should size with the image 
 
    </div> 
 
</div>

Answer 3

を削除することができます：

インラインスタイルを使用しない、使用CSSの代わりに

：

• は120px

または

• 使用display:table

.sidebarでNOTEよりも小さくない画像を使用します

body { 
 
    color: #ffffff; 
 
} 
 
.sidebar { 
 
    position: fixed; 
 
    /* top: 179px; - removed for demo*/ 
 
    left: 100px; 
 
    min-width: 100px; 
 
    max-width: 120px; 
 
    background-color:red 
 
} 
 
.pages { 
 
    background-color: #fff; 
 
    height: 30px; 
 
    position: relative; 
 
    left: 0px; 
 
    border: solid #E2C4FF; 
 
    border-width:0 1px 1px; 
 
    text-align: center 
 
} 
 
img { 
 
    display: block 
 
} 
 
.dots { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0%; 
 
    transform: translate(-50%, -70%); 
 
    color:white; 
 
    font-family: 'Questrial', sans-serif; 
 
} 
 
.custom-links { 
 
    background-color: #000; 
 
} 
 
#avatar { 
 
    min-width: 100px; 
 
    max-width: 120px; 
 
}

<div class="sidebar"> 
 
    <img id="avatar" src="//lorempixel.com/200/200" /> 
 
    <div class="pages"> 
 
    <a href="#" class="page-arrow">«</a> 
 
    <p class="dots"> 
 
     .&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;.&nbsp;&nbsp;. 
 
    </p> 
 
    <a href="#" class="page-arrow">»</a> 
 
    </div> 
 
    <div class="custom-links"> 
 
    I should size with the image 
 
    </div> 
 
</div>