使子div扩展为溢出内容的宽度

问题描述

我正在寻找一个通过文件和周围代码一起列出匹配行的代码。匹配的行及其环境被列在容器div中，上设置 display：table-row code>，并将边框设置为 .line

  .match {
 display：table-row; 
} 
 .match〜.match .line：first-child {
 border-top：1px solid red; 
} 
  

或

  .match {
 display：table-row; 
} 
 .match：not（：first-child）.line：first-child {
 border-top：1px solid red; 
} 
  

I'm messing around with a code searching ui that lists matched lines by file along with the surrounding code. The matched lines and their surroundings are listed inside a container div with overflow: auto so that the code can be scrolled.

Here is how the html and css are laid out:

.container {
  width: 200px;
  overflow: auto;
  border: 2px solid #CCC;
}

.match:first-child {
  border-top: none;
}

.match {
  border-top: 1px solid red;
}

span {
  white-space: pre;
}

<div class="container">
  <div class="match">
    <div class="line">
      <span>This content is so long that it ends up going beyond the edge of the container. Good thing we are using overflow: auto so we can scroll!</span>
    </div>
    <div class="line">
      <span>Another line that is too long to fit into the container.</span>
    </div>
    <div class="line">
      <span>There can be many lines in each match, but the border should only be between the matches, not the lines.</span>
    </div>
  </div>
  <div class="match">
    <div class="line">
      <span>The second line. Does it matter how long this line is? Will the line border extend now that this line is overflowing?</span>
    </div>
  </div>
</div>

The problem is that when the content within the .line divs extends beyond the .container, the borders on the .match elements only extend to the width of the .container.

Is there any way to make the .match elements extend to the entire width of the container so that the border extends the entire width of the scrollable area?

解决方案

You can set display: table-row on .match, and set the border on .line

.match {
  display: table-row;
}
.match ~ .match .line:first-child {
  border-top: 1px solid red;
}

jsFiddle

or

.match {
  display: table-row;
}
.match:not(:first-child) .line:first-child {
  border-top: 1px solid red;
}

jsFiddle

这篇关于使子div扩展为溢出内容的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！