调整元素的大小

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属性无法使用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除max-width

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是因为您使用的小图片（100px）小于为120px设置的max-width

所以你可以：

• 使用不小于120px
的图片

或

• 在display:table
中使用.sidebar

注意：不要使用内联样式，而是使用CSS

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;