Question

我已经阅读了quite a few similar questions，但没有一个是完全一样的，或者有一个适合我的答案

我正在使用Twitter Bootstrap 3.我有两行，每行包含一个col-sm-12 div，所以它们的宽度相同。第一行中的内容比其容器宽，但我在包含两行的元素上设置了overflow:auto，因此显示了一个水平滚动条，可以使用它看到内容，这样就可以了。

在第二行中，我有一个div，我应用了一个jQuery插件（jqxGrid，以及它的价值）。我已将插件的width选项设置为＆＃34; 100％＆＃34;。生成的网格内容对于其容器来说也太宽了，但由于jQuery插件创建网格的方式，它将网格的宽度限制为其父宽度的100％而不是溢出。

所以我真正需要的是.row元素都与最广泛的溢出内容一样宽，这样当jQuery插件评估其父级的宽度以便设置自己的宽度时，结果网格最终会变得与第一行中溢出的内容一样宽。

I've made a fiddle我希望能说明这个问题。我认为这是一个CSS问题，所以一个纯粹的CSS解决方案会非常好，但我怀疑这是可能的。

＆＃13;

.wrapper {
  color: #fff;
  padding: 10px;
}

.container-fluid {
  background-color: #333;
  overflow: auto;
}

.row1 {
  background-color: yellow;
}

.row2 {
  background-color: orange;
}

.short-content {
  background-color: red;
  width: 100%;
}

.long-content {
  width: 2000px;
  background-color: blue;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="wrapper">
  <div class="container-fluid">
    <div class="row row1">
      <div class="col-sm-12">
        <div class="long-content">
          Long content
        </div>
      </div>
    </div>
    <div class="row row2">
      <div class="col-sm-12">
        <div class="short-content">
          THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

根据我的理解，将每个:root::before { content: 'ROOT'; } html { height: 111vh; width: 90vw; background: rgba(255, 200, 50, 0.2); font: 600 15px/1 Consolas; cursor: crosshair; overflow-y: scroll; text-align: center; color: black; } body { height: 101%; width: 50vw; padding: 0 10vw; margin: 2vh auto; outline: 0.5rem solid rgba(250, 150, 150, 0.9); background: rgba(50, 255, 0, 0.4); font-size: 0.8rem; } div { max-height: 15vh; max-width: 50vw; padding: 10px; outline: 2px dashed darkblue; background: rgba(255, 200, 50, 0.5); } span { /* OP: display:inline */ display: block; min-height: 10%; max-width: 50vw; padding: 0 20px; margin: 8px auto; outline: 3px solid blue; background: rgba(255, 0, 100, 0.7); } .inline { display: inline; } /*::..BEGIN DISABLED OP..:: .parent-span .cta-wrapper {background:gray;} .parent-span:last-child > .cta-wrapper {background:red; } .parent-span:first-child > .cta-wrapper {background:green} } ::..END DISABLED OP..::*/ /*::..BEGIN nth-type-of..::*/ body>span>div { background: gray; } body>span:first-of-type>div { background: red; } body>span:last-of-type>div { background: green; } /*::..END nth-of-type..::*/ /*::..BEGIN nth-child..:: body>span>div { background: gray; } body>span:nth-child(2)>div { background: red; } body>span:nth-child(4)>div { background: green; } ::..END nth-child..::*/打包到他们自己的父<html title='ROOT-HTML'> <head title='L0-HEAD'> </head> <body title='L0-BODY [COMMON ANCESTOR]'>L0 <div title='L1-DIV'>[XXXX] L1 [XXXX]</div> <span class="parent-span" title='L1-SPAN [POINT OF ENTRY]'>L1 <div class="cta-wrapper" title='L2-DIV [TARGET ELEMENT]'>L2 <div title='L3-DIV'>L3 [1]</div> </div> </span> <span class="parent-span" title='L1-SPAN [POINT OF ENTRY]'>L1 <div class="cta-wrapper" title='L2-DIV [TARGET ELEMENT]'>L2 <div title='L3-DIV'>L3 [2]</div> </div> </span> <span class="parent-span" title='L1-SPAN [POINT OF ENTRY]'>L1 <div class="cta-wrapper" title='L2-DIV [TARGET ELEMENT]'>L2 <div title='L3-DIV'>L3 [3]</div> </div> </span> <div title='L1-DIV'>[XXXX] L1 [XXXX]</div> </body> </html>中是一种将所有.col-sm-12放在一个.row容器中的详细方法，如{{1}总是包装成一个新行。

因此，如果您的设置允许删除中间.col-sm-12标记，则您必须在.row上.col-sm-12添加唯一额外的css行。（在下面的示例中，我使用.row上的ID float: left;将此修改与您网页的其余部分隔离开来。）

.row

#custom

将父DIV展开为溢出内容宽度

1 个答案: