Wie kann man absolut positionierte Tabellen-Dialog-Zellenbreiten nicht durch relativ positionierte, floatende Container zerquetschen?

-2

Ich mache einen Datumsauswahldialog, wo es eine linke Pfeiltaste, ein Diagramm der Monatsdaten und eine Rechtspfeiltaste gibt.Wie kann man absolut positionierte Tabellen-Dialog-Zellenbreiten nicht durch relativ positionierte, floatende Container zerquetschen?

Der Dialog wird durch seinen Container horizontal gequetscht, wenn der Container schwebt. Ich möchte den Container schweben lassen, damit ich einen anderen Container daneben stellen kann.

Wie kann ich es so machen, dass der Dialog nicht zerquetscht nicht erhalten?

Im folgenden Code können Sie sehen, wie sich das Quetschen aufhebt, indem Sie die Float-Regel auskommentieren.

.selector-container { 
 
    position: relative; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.selector { 
 
    width: 160px; 
 
    height: 50px; 
 
    background-color: #eee; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.dialog { 
 
    position: absolute; 
 
    top: 50px; 
 
    border: 1px solid #000; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
} 
 

 
td { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
td.side { 
 
    width: 40px; 
 
} 
 

 
table.center td { 
 
    width: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    
 
    </head> 
 

 
    <body> 
 
    <div class="selector-container"> 
 
     <div class="selector"> 
 
      <p>Select some stuff</p> 
 
     </div> 
 
     <table class="dialog"> 
 
      <tr> 
 
      <td class="side"> 
 
       < 
 
      </td> 
 
      <td> 
 
       <div> 
 
       Oct 2017 
 
       </div> 
 
       <table class="center"> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>5</td> 
 
        <td>6</td> 
 
        <td>7</td> 
 
       </tr> 
 
       <tr> 
 
        <td>8</td> 
 
        <td>9</td> 
 
        <td>10</td> 
 
        <td>11</td> 
 
        <td>12</td> 
 
        <td>13</td> 
 
        <td>14</td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      <td class="side"> 
 
       > 
 
      </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <div class="selector-container"> 
 
     <div class="selector"> 
 
      <p>Select some stuff</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

Quelle

2017-06-15 RedKrovvy

ich verloren Sie bei 'links und rechts arrows' ... bitte erklären, wie es aussehen sollte? Haben Sie ein Design, wonach Sie suchen? und Bild mindestens oder eine Skizze? –

Ich habe meine Beschreibung aktualisiert. Außerdem wurde der Code aktualisiert. Wenn Sie das Code-Snippet ausführen, wird die Datumsauswahl visuell angezeigt. – RedKrovvy

Ich bin immer noch absolut nicht positiv, was das erwartete Ergebnis ist. Warum verwenden Sie auch den zweiten '.Selector' nach dem Kalender - wenn der tatsächliche Ort oben sein sollte ?. Bitte, bitte benutze Paint, benutze Photoshop, benutze was auch immer, mach einfach CLEAR und ohne Zweifel was deine Absichten sind. Aus dem Code, wenn ich die float entfernen: linke Regel bin ich noch mehr verwirrt. –

I kam mit einer Lösung auf, die dem Dialog eine Breite zu geben, und Prozent Subteil Breiten geben verwenden.

.selector-container { 
 
    position: relative; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.selector { 
 
    width: 160px; 
 
    height: 50px; 
 
    background-color: #eee; 
 
    border: 1px solid #ccc; 
 
} 
 

 
.dialog { 
 
    position: absolute; 
 
    top: 50px; 
 
    width: 400px; 
 
    border: 1px solid #000; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
} 
 

 
td { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
td.side { 
 
    width: 10%; 
 
} 
 

 
table.center { 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    </head> 
 

 
    <body> 
 
    <div class="selector-container"> 
 
     <div class="selector"> 
 
      <p>Select some stuff</p> 
 
     </div> 
 
     <table class="dialog"> 
 
      <tr> 
 
      <td class="side"> 
 
       < 
 
      </td> 
 
      <td> 
 
       <div> 
 
       June 2017 
 
       </div> 
 
       <table class="center"> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>3</td> 
 
        <td>4</td> 
 
        <td>5</td> 
 
        <td>6</td> 
 
        <td>7</td> 
 
       </tr> 
 
       <tr> 
 
        <td>8</td> 
 
        <td>9</td> 
 
        <td>10</td> 
 
        <td>11</td> 
 
        <td>12</td> 
 
        <td>13</td> 
 
        <td>14</td> 
 
       </tr> 
 
       </table> 
 
      </td> 
 
      <td class="side"> 
 
       > 
 
      </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <div class="selector-container"> 
 
     <div class="selector"> 
 
      <p>Select some stuff</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

Quelle

2017-06-16 01:36:33 RedKrovvy

function buildCalendar(mm_dd_yyyy) { 
 
    
 
    var MN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], 
 
     WD = ["S", "M", "T", "W", "T", "F", "S"], 
 
     date = !mm_dd_yyyy? new Date() : new Date(mm_dd_yyyy), 
 
     y = date.getFullYear(), 
 
     m = date.getMonth(), 
 
     pfx = (date.getDay() + 7) % 7,  // How many prefix empty cells we miss? 
 
     mtot = new Date(y, m+1, 0).getDate(), 
 
     sfx = 7 - (pfx + mtot + 7) % 7, // How many suffix empty cells we miss? 
 
     html = "<table>"; 
 
    
 
    // MONTH YEAR 
 
    html += "<tr><th colspan='7'>"+ MN[m] +" "+ y +"</th></tr>"; 
 
    // WEEK DAYS 
 
    html += "<tr>"; 
 
    for (var i = 0; i < WD.length; i++) html += "<th>" + WD[i] + "</th>"; 
 
    html += "</tr>"; 
 
    // CALENDAR 
 
    html += "<tr>"; 
 
    for (var i = 0; i < pfx; i++) html += "<td></td>"; // Empty Prefix 
 
    for (var i = 0; i < mtot; i++) { 
 
    html += "<td>" + (i+1) + "</td>"; 
 
    if (!((i+pfx+1)%7)) html += "</tr><tr>"; // Add a new week row? 
 
    } 
 
    for (var i = 0; i < sfx; i++) html += "<td></td>"; // Empty Suffix 
 
    return html + "</tr></table>"; 
 
} 
 

 
[].forEach.call(document.querySelectorAll("[data-calendar]"), function (el) { 
 
    el.innerHTML = buildCalendar(el.dataset.calendar); 
 
});

/*QuickReset*/ 
 
*{margin: 0;box-sizing: border-box;}html,body {height: 100%;font: 14px/1.4 sans-serif;} 
 
/* Flexy */ 
 
.flex-row {display:flex; flex-direction:row;} 
 
.flex-col {display:flex; flex-direction:column;} 
 
.flex-grow {flex:1;} 
 
.flex-child-hcenter{justify-content: center;} 
 
.flex-self-vcenter{align-self: center;} 
 

 

 

 
/* Calendar */ 
 
.calendar { 
 
    float: left; 
 
    border: 1px solid #0bf; 
 
} 
 
.calendar .arr{ 
 
    padding: 8px; 
 
} 
 
[data-calendar] td, 
 
[data-calendar] tr{ 
 
    text-align: center; 
 
    padding:4px 6px; 
 
}

<div class="calendar"> 
 
    <div class="flex-row"> 
 
    <div class="flex-grow">FOO</div> 
 
    <div class="flex-grow">BAR</div> 
 
    </div> 
 

 
    <div class="flex-row"> 
 
    <div class="flex-self-vcenter arr">&lsaquo;</div> 
 
    <div data-calendar="07/01/2017"><!-- I'm lazy. Fill this using JS --></div> 
 
    <div class="flex-self-vcenter arr">&rsaquo;</div> 
 
    </div> 
 
</div> 
 

 

 

 
<div class="calendar"> 
 
    <div class="flex-row"> 
 
    <div class="flex-grow">FOO</div> 
 
    <div class="flex-grow">BAR</div> 
 
    </div> 
 

 
    <div class="flex-row"> 
 
    <div class="flex-self-vcenter arr">&lsaquo;</div> 
 
    <div data-calendar="08/01/2017"><!-- I'm lazy. Fill this using JS --></div> 
 
    <div class="flex-self-vcenter arr">&rsaquo;</div> 
 
    </div> 
 
</div>

Quelle

2017-06-16 03:52:38

Danke für die Mühe, Roko! – RedKrovvy

Wie kann man absolut positionierte Tabellen-Dialog-Zellenbreiten nicht durch relativ positionierte, floatende Container zerquetschen?

Antwort

Verwandte Themen