私のように表形式で情報を表示するパネルを表示しようとしています、 
幅 - テーブルセルの表示ブレークのための50パーセントの別々のラインに
マイplukerコードがhereです。今、私はNAMEラベルと値My Venueを置くためにdisplay:table-rowを1つの場所に使用します。私はtable-cellディスプレイに50％の幅を与えた場合、それは
、として次の行に侵入し、私はtable-cell表示のための49％として幅を作ることによってそれを修正することができています。
ディスプレイに余白がないので、なぜ50%幅が違う行に分かれているのか不思議です。
2つのスパンの間に空白があります。その空白はスペースとしてレンダリングされ、スペースはゼロでない幅を持ちます。スペースの幅に50％を加えた後、別の50％の余裕がないため、2番目のスパンがラップされます。 </span><span>を間に空白を入れずに互いに突き合わせると、折り返しがなくなります。 other ways to deal with the problemがあります。これには、フォントサイズを0に調整してスペースの幅をゼロにするか、レイアウトに他の方法を使用するなどがあります。
このjsfiddle
/* SECTIONS */
.section {
\t clear: both;
\t padding: 0px;
\t margin: 0px;
}
/* COLUMN SETUP */
.col {
\t display: block;
\t float:left;
\t margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
\t width: 100%;
}
.span_1_of_2 {
\t width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
\t .col {
\t \t margin: 1% 0 1% 0%;
\t }
}
@media only screen and (max-width: 480px) {
\t .span_2_of_2, .span_1_of_2 { width: 100%; }
}<div class="section group">
\t <div class="col span_1_of_2">
\t My Name
\t </div>
\t <div class="col span_1_of_2">
\t My Venue
\t </div>
</div>