css - 如何在窗口大小变化时在多个div中显示消息而不相互重叠

Question

我有一个容器并显示消息。当我改变窗口大小时，文本相互重叠。这是我的代码。

<div id="msgRowInfo">
    <div  style="hieight:100%;width:100%">
            <div id="msgInfo">
                <div  id="msgType" >{{msg.msgType}}</div>
                <div id="msgTime" >{{msg.time}}</div>
            </div>
            <div  id="msgContent" >{{msg.subject}}</div>
            <div id="msgDescription" >{{msg.description}}</div>
     </div>    
</div>

这是我的 CSS。

 #msgRowInfo{
        padding-top: 5px;
          padding-left: 5px;
          height: 100%;
          width: 100%;
          border-bottom: lightgrey;
          border-bottom-style: solid;
          border-bottom-width: thin;
          display: -ms-inline-flexbox
            }
        #msgInfo{
       width:100%;
    padding-left:1%;
      }
        #msgType{
        display: inline-flex;
          font-size: 20px;
          width: 70%;
        }
        #msgTime{
        width:27%;
         display: inline-block;
          float: right;
          text-align: right;
          padding-right: 3%;
        }
        #msgContent{
        padding-left: 1%; 
        width:100%;
        font-size: 20px;
        }

当我调整 msg.msgType 大小时，msg.time 重叠。如何不相互重叠并减小窗口大小应该在下一行。有人可以帮我解决这个问题吗。

Answer 1

#msgRowInfo {
   padding: 5px;
   border-bottom: lightgrey 1px solid;
   font-size: 20px;
 }
 #msgInfo {
   display: flex;
   flex-wrap: wrap;
   background-color: red;
   
 }
 #msgType {
   background-color: pink;
   /* flex basis sets a minium width of the message type so message time wraps */
   flex: 1 1 75%;
 }
 #msgTime {
   background-color: tan;
 }

<div id="msgRowInfo">
  <div id="msgInfo">
    <div id="msgType">{{msg.msgType}}</div>
    <div id="msgTime">{{msg.time}}</div>
  </div>
  <div id="msgContent">{{msg.subject}}</div>
  <div id="msgDescription">{{msg.description}}</div>
</div>

我不是很确定你在找什么，所以我做了一个最好的猜测。我删除了很多 css 和一些 html。有时降低复杂性会帮助您解决问题。我还添加了一些背景颜色，这样您就可以看到发生了什么。如果您有任何问题，请告诉我。将 display flex 应用于消息信息区域将停止类型和时间的重叠。希望这会有所帮助。

当然，这只是解决问题的一种方法，还有很多其他方法。