Il passaggio da tavoli per div con i CSS

StackOverflow https://stackoverflow.com/questions/1583373

  •  21-09-2019
  •  | 
  •  

Domanda

Ho una tabella HTML nella mia pagina che sto cercando di sostituire con div e CSS. In sostanza, si tratta di una tabella 3x3 con i contenuti scalabile nei bordi e gli angoli di dimensioni medie e fissato con le immagini in background per dare tutto un aspetto piacevole drop-ombra.

Ho letto molti articoli e le voci di miscelazione% s 'con i pixel, ma nessuno di loro sembrano avere proprio quello che sto cercando.

Ecco quello che ho finora: 

<html>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red; ">
   <div style="width: 80%; height: 100%;">
    <div style="clear: both; height: 100%;">
     <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
     <div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
     <div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
      </div>
     </div>
   </div>
   <p>Text down here...</p>
</body>
</html>

Come posso ottenere il div blu accanto a quello giallo? I può essere completamente fuori base qui. Io apprezzo molto di aiuto.

È stato utile?

Soluzione

Se l'ordine semantico non è importante, funziona per spostare il vostro div proprio sopra la vostra div contenuti: 

<div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
<div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!...</div>

Altri suggerimenti

Mi dispiace essere brusco, ma si sta andando su questo nel modo sbagliato. La questione non è uno dei 'tavoli vs div' è uno dei 'tavoli vs web-standard. E 'molto allettante quando si inizia con i CSS per avvolgere tutto in un <div> e da fare con esso, quando in realtà il punto è quello di utilizzare l'elemento HTML corretto per rappresentare i dati in esso contenuti, e usare i CSS per lo stile di esso.

Con questo in mente, qual è l'effettivo contenuto della pagina? Si tratta di un elenco di dati? Una serie di punti? Forse è in realtà i dati tabulari, nel qual caso una tabella è la scelta giusta? Una volta stabilito questo, e ha scritto l'appropriato codice HTML, allora si può iniziare il CSS. A volte potrebbe essere necessario aggiungere elementi HTML in più per raggiungere lo stile è necessario, va bene finché hai già hash la struttura e ho pensato a lungo e duramente su tali elementi.

Si sta andando a voler utilizzare il tre colonne margine negativo trucco ( demo ).

Se quello che vuoi è angoli arrotondati, questo può essere una buona idea.

HTML: 

<div class="box">
  content here
  <div class="topleft corner"></div>
  <div class="topright corner"></div>
  <div class="bottomleft corner"></div>
  <div class="bottomright corner"></div>
</div>

CSS 

.box{
padding:50px;
position:relative; /*this allows positioning child elements relative to this one*/
}

.corner{ position:absolute; width:50px;}

.topleft{ top:0; left:0; background-image:url(tlcorner.gif);}
.topright{ top:0; right:0; background-image:url(trcorner.gif);}
.bottomleft{ bottom:0; left:0; background-image:url(blcorner.gif);}
.bottomright{ bottom:0; right:0; background-image:url(brcorner.gif);}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:)</title>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red;">
    <div style="height: 100%; margin-right: 20%;">
      <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
      <div style="float: left; width: 80%; height: 100%; background-color: yellow;">

This is my Content! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      </div>
      <div style="float: left; width: 30px; height: 100%; background-color: blue;">R</div>
      <div style="clear: both;"></div>
    </div>
  </div>
  <p>Text down here...</p>
</body>
</html>

Il W3C ha diverse soluzioni imminenti. Il più vicino che corrisponde alla tua necessità è attualmente in corso di attuazione in Chrome, Firefox e Internet Explorer ( http: //dev.w3.org/csswg/css3-grid-layout ).

di layout Grid CSS

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top