Question

我正在尝试显示双列布局。在左栏中有一张图片，可以显示为30％或可用宽度但不超过300px。在右栏中，有一个描述跨越浏览器宽度的其余部分。

我不知道先验描述有多长，我想限制描述字段的高度，所以我使用textarea来启用滚动（如果需要）。

这是我目前的HTML代码：

<div class="tile-panel">
    <div class="tile-preview-panel">
        <img class="tile-img" src="{{ thumbnail_url }}">
    </div>
    <div class="tile-desc-panel">
        <textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
    </div>
</div>

我的CSS：

.tile-panel {
      width: 100%;
      overflow: auto;
}
.tile-preview-panel {
      width: 30%;
      float:left;
      max-width: 300px;
}
.tile-desc-panel {
      overflow: hidden;
}
.tile-img {
      width: 100%;
}
.tile-description {
      resize: none;
      background-color:inherit !important;
      width: 100%;
}
.tile-description[readonly] {
      cursor: default; !important;
}

唯一剩下的位是textarea的高度。无论浏览器的宽度如何，我都希望它始终是tile-preview-panel的高度。这是用纯CSS实现的吗？

Answer 1

这是一个开始，这个使用你现有的textarea，

.tile-panel {
  display: table;
  width: 100%;
}
.tile-preview-panel {
  display: table-cell;
  width: 30%;
}
.tile-desc-panel {
  display: table-cell;
  position: relative;
}
.tile-img {
  width: 100%;
}
.tile-description {
  resize: none;
  background-color:inherit !important;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  position: absolute;
  }
.tile-description[readonly] {
  cursor: default; !important;
}

@media (min-width: 1000px){
  .tile-preview-panel {
    width: 300px;
  }
}

<div class="tile-panel">
    <div class="tile-preview-panel">
        <img class="tile-img" src="http://lorempixel.com/300/300/sports/1/">
    </div>
    <div class="tile-desc-panel">
        <textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
    </div>
</div>

这是一个使用div的版本，因此您可以更多地设置文本样式，使用链接等。

.tile-panel {
  display: table;
  width: 100%;
}
.tile-preview-panel {
  display: table-cell;
  width: 30%;
  padding-right: 5px;
}
.tile-desc-panel {
  display: table-cell;
  position: relative;
  background-color: #ddd;
  border: 1px solid #999;
}
.tile-img {
  width: 100%;
  vertical-align: top;
}
.tile-description {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow: auto;
  padding-left: 10px;
}

@media (min-width: 1000px) {
  .tile-preview-panel {
    width: 300px;
  }
}

<div class="tile-panel">
  <div class="tile-preview-panel"><img class="tile-img" src="http://lorempixel.com/300/300/nature/5/"></div>
  <div class="tile-desc-panel">
    <div class="tile-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

也可以使用flex，但浏览器支持略少。

.container {
  display: flex;
  width: 100%;
}
.pic {
  flex: 0 0 20%;
  max-width: 200px;
  padding-right: 10px;
}
.text {
  flex: 1;
  position: relative;
  overflow: auto;
  background-color: #ddd;
  border: 1px solid #999;
}
.pic img {
  width: 100%;
  vertical-align: top;
}
.text div {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  padding-left: 10px;
}

<div class="container">
  <div class="pic">
  <img src="http://lorempixel.com/300/300/nature/1/">
  </div>
  <div class="text">
    <div class="tile-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Answer 2

我会使用javascript这个

把这个放在头脑中

<script>

function sameheight(){
var divHeight = document.getElementById('DIV ID YOU WANT TO GET HEIGHT OF').style.height;
document.getElementById('DIV ID YOU WANT THE SAME SIZE').style.height = divHeight;
}
</script>

穿上你的身体

<body onload="sameheight()">

Answer 3

这应该有效：

＆＃13;

.tile-panel {
    width: 100%;
    position: relative;
}
.tile-preview-panel {
    position: relative; 
    width: 74%;
}
.tile-desc-panel {
    position: absolute; 
    top: 0;
    right:0;
    bottom:0; 
    margin-left: 1.5%; 
    width: 24.5%; 
    height: 100%; 
    background: #232323; 
    overflow: hidden;
}
.tile-img {
      width: 100%;
}
.tile-description {
      resize: none;
      background-color:inherit !important;
      width: 100%;
}
.tile-description[readonly] {
      cursor: default; !important;
}

textarea {
  border: none;
  }

＆＃13;

<div class="tile-panel">
    <div class="tile-preview-panel">
        <img class="tile-img" src="http://placehold.it/640x260">
    </div>
    <div class="tile-desc-panel">
        <textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
    </div>
</div>

＆＃13;

Answer 4

建议使用javascript作为@ user1899614的另一种形式，但使用ES6和getBoundingClientRect（）方法：

const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {

  document.querySelectorAll(someTextareaSelector)[0].style.height = 
    document.querySelectorAll(someParentElementSelector)[0]
    .getBoundingClientRect().height + "px"

}

const someTextareaSelector = '...' 
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)

自动缩放textarea高度

4 个答案: