如何使我的div适应动态尺寸正确

问题描述 投票:0回答:2

我想提出以下的CSS:

在这里你有什么我已经作出,但是,在div sizer2应该显示的div喜欢在下面的痛

https://codepen.io/crocsx-the-styleful/pen/rPGzXm(很破为例)

所以基本上是:

如果右边有足够的空间,那么,显示其他(在线)后,我的标题和内容中的一个

如果我的DIV宽度小,然后显示我的标题上的内容。

此外,红线必须始终在底部,和DIV不应溢出。

这样enter image description here

我不知道究竟如何做到这一点:

.container{
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
  border-bottom: red 1px solid;
  display: inline-flex;
}

.title{
  word-break: break-all;
  white-space: normal;
  width: 100px;
  min-width: 100px;
  height: auto;
  word-break: break-all;
  white-space: normal;
}

.content{
  word-break: break-all;
  white-space: normal;
  margin-inline-start: 0px;
  overflow: auto;
}

为什么呢?在我的情况,用户情况下编辑字段的布局,我想是动态的,所以,如果他想水平/垂直显示的信息是正确显示领域

html css
2个回答
1
投票

您可以使用JavaScript来实现它。决定哪些类进行评估,以.container,无论是仍然由容器的宽度.container.container2。请注意,在线路containerDiv.offsetWidth<100+5+5+10100指你.title宽度,+5+5关于你padding-left+padding-right+10refering垂直滚动框的右侧的宽度。当然,你可以用它玩,以适应您的需求。

var containers = document.querySelectorAll('.container')
containers.forEach(function(containerDiv){
  console.log(containerDiv.offsetWidth)
  if(containerDiv.offsetWidth<100+5+5+10){
    containerDiv.classList.remove('container');
    containerDiv.classList.add('container2')
  }
})
.sizer{
  width:500px;
  height:100px;
  background-color:grey;
  position: relative;
  padding: 5px;
}
.sizer2{
  width:119px;
  height:500px;
  background-color:grey;
  position: relative;
  padding: 5px;
  left:600px;
  position:absolute;
  top:10px;
}


.container{
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
  border-bottom: red 1px solid;
  display: flex;
/*   flex-wrap: wrap; */
  overflow: auto;
  box-sizing: border-box;
}

.container2{
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
  border-bottom: red 1px solid;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  box-sizing: border-box;
}

.title{
  word-break: break-all;
  white-space: normal;
  width: 100px;
  min-width: 100px;
  height: auto;
}

.content{
/*   word-break: break-all; */
  white-space: normal;
  margin-inline-start: 0px;
/*   overflow: auto; */
}
<div class="sizer">
  <div class="container">
    <div class="title">TiletilTiletilTiletilTiletil</div>
    <div class="content">Nullam porttitor lacus at turpis. Donec posuere metus vitae ipsum. Aliquam non mauris. Morbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis. Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.</div>
  </div>
</div>

<div class="sizer2">
  <div class="container">
    <div class="title">TiletilTiletilTiletilTiletil</div>
    <div class="content">Sizer2Nullam porttitor lacus at turpis. Donec posuere metus vitae ipsum. Aliquam non mauris. Morbi non lectus. Aliquam sit amet diam in magna bibendum imperdiet. Nullam orci pede, venenatis non, sodales sed, tincidunt eu, felis. Fusce posuere felis sed lacus. Morbi sem mauris, laoreet ut, rhoncus aliquet, pulvinar sed, nisl. Nunc rhoncus dui vel sem.</div>
  </div>
</div>

-1
投票

您可以使用media queries得到您想要的结果。

© www.soinside.com 2019 - 2024. All rights reserved.