So fügen Sie Überlauf-y hinzu: scroll?

Question

Ich habe meine HTML-Code:

<div> 
 
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;"> 
 
     <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;"> 
 
      <div style="float: left;">ROW X COLUMN</div> 
 
     </div> 
 
     <div style="position: relative; width: 395px; padding: 2px; background-color: rgb(255, 255, 255); display: table;"> 
 
      <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;"> 
 
       <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div> 
 
       <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div> 
 
       <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div> 
 
       <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div> 
 
      </div> 
 
      <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;"> 
 
       <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div> 
 
       <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div> 
 
       <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div> 
 
       <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div> 
 
      </div> 
 
      <div style="float: left; display: table; border-spacing: 2px; border-collapse: separate;"> 
 
       <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div> 
 
       <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div> 
 
       <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div> 
 
       <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Ich mag würde Überlauf-y hinzuzufügen: bewegen, so dass die Säule von 2 x 0 beginnend erscheint direkt auf die Säule 1 X 0.

Ich habe verschiedene CSS versucht, aber nicht herausfinden, wie zu beheben. Bitte helfen Sie mir, das herauszufinden.

Answer 1

die Position von 2 x Säule hängt nicht von Überlauf-y

es auf Breite abhängig, so dass Sie Spaltenbreite auf 30% der Breite des Mutter hinzufügen würden, und richtiges Kind html atribute Tabelle hinzufügen, so table-cell

<div> 
 
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;"> 
 
     <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;"> 
 
      <div style="float: left;">ROW X COLUMN</div> 
 
     </div> 
 
     <div style="position: relative; width: 395px; padding: 2px; background-color: rgb(255, 255, 255); display: table;"> 
 
      <div style="width: 30%; float: left; display: table-cell; border-spacing: 2px; border-collapse: separate;"> 
 
       <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div> 
 
       <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div> 
 
       <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div> 
 
       <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div> 
 
      </div> 
 
      <div style="width: 30%; float: left; display: table; border-spacing: 2px; border-collapse: separate;"> 
 
       <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div> 
 
       <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div> 
 
       <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div> 
 
       <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div> 
 
      </div> 
 
      <div style="width: 30%; float: left; display: table-cell; border-spacing: 2px; border-collapse: separate;"> 
 
       <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div> 
 
       <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div> 
 
       <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div> 
 
       <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

wollen Sie die Spalte 2x0 auf der rechten Seite oder wollen Sie eine Scrollbar erscheinen gerade? Wenn Sie nur wollen, dass die Spalten nebeneinander liegen, können Sie versuchen, Tabellen zu verwenden (eine Tabelle, um andere Tabellen zu halten), und wenn das nicht funktioniert, verwenden Sie einfach CSS-Rasterlayouts mit drei Rasterspalten der angegebenen (oder automatischen) Breite und dann eine Zeile mit automatischer Höhe, und dann platzieren Sie die Tabellen einfach so, wie Sie es für richtig halten. (Und dann schätze ich einfach "overflow-y: scroll" irgendwo in der Box div, wenn Sie wirklich die Bildlaufleiste wollen.)

Answer 3

Obwohl ich flexbox anstelle der width in Pixeln verwenden würde, möchten Sie im Wesentlichen verhindern float Attribut, um Ihr Element in eine neue Zeile einzufügen. Sie können diese display: inline-block und white-space: nowrap mit tun:

<div> 
 
    <div class="cusDlg PP_noselect" tabindex="0" style="position: relative; border: 1px solid rgb(192, 192, 192); padding: 5px; background-color: rgb(214, 214, 214); font-family: arial; font-size: 13px; overflow: hidden; width: 400px; height: 125px;"> 
 
     <div class="dlghdr" style="position: relative; top: 0px; height: 20px; width: auto; padding: 2px; line-height: 20px;"> 
 
      <div style="float: left;">ROW X COLUMN</div> 
 
     </div> 
 
     <div style="position: relative;width: 100%;padding: 2px;background-color: rgb(255, 255, 255); white-space: nowrap; overflow-y: auto;"> 
 
      <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;"> 
 
       <div unselectable="on" index="0" title="0 X 0 - SOME DATA" class="ofd_sel_fnm" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 0</div> 
 
       <div unselectable="on" index="1" title="0 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 1</div> 
 
       <div unselectable="on" index="2" title="0 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 2</div> 
 
       <div unselectable="on" index="3" title="0 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">0 X 3</div> 
 
      </div> 
 
      <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;"> 
 
       <div unselectable="on" index="4" title="1 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 0</div> 
 
       <div unselectable="on" index="5" title="1 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 1</div> 
 
       <div unselectable="on" index="6" title="1 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 2</div> 
 
       <div unselectable="on" index="7" title="1 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">1 X 3</div> 
 
      </div> 
 
      <div style="display: inline-block;border-spacing: 2px;border-collapse: separate;"> 
 
       <div unselectable="on" index="8" title="2 X 0 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 0</div> 
 
       <div unselectable="on" index="9" title="2 X 1 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 1</div> 
 
       <div unselectable="on" index="10" title="2 X 2 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 2</div> 
 
       <div unselectable="on" index="11" title="2 X 3 - SOME DATA" style="float: left; clear: both; display: table-cell; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; width: 133px;">2 X 3</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>