Размерные элементы друг с другом

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 следует применять к детям, так как он не будет доступен с display:table имуществом на контейнере .sidebar.

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

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

Это потому, что вы используете небольшое изображение (100px), который меньше, чем 120px набор для max-width

так что вы можете:

• использовать изображение размером не менее 120px

или

• использование display:table в .sidebar

ПРИМЕЧАНИЕ: не использовать встроенные стили, использовать CSS вместо

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>