CSSで浮動小数点数を使って段落を積み重ねる際の問題

私はHTMLとCSSを扱うクラスのWebページを構築しています。CSSで浮動小数点数を使って段落を積み重ねる際の問題

私は2つの段落に2つの列に移動しようとしているdivコンテナを持っています。

フロートを使用して列を設定しました。彼らは正しく2つの列を作成するに浮かんだが、テキストはすべて間違った順序です。各列に2として設定する必要がある上部および4段落にある青い見出しがあります。また、それぞれの段落は、実際に別の段落の列にあるべきであるときに双子で列に配置されます。

私はこれで新しく、私は失われています。私は幅と浮動小数点で周り遊んだと何も動作するようです。私はテキストが正しくレンダリングされる2つの列を作成するために何ができるかを知る必要があります。

ここに私のコードです。 HTMLれるここ

#maincontent  {float: left; margin: 0px; padding: 0px; 
     width: 950px; border-left: 1pt solid #999999; 
     border-bottom: 1pt solid #999999; border-right: 1pt solid #999999;      background-color: #E0E0E0} 

#maincontent.cols {width: 450px; float: left; margin: 5px; padding: 5px} 

#maincontent p {width: 450px; margin: 5px; float: left; padding: 5px; 
     text-align: left} 

#maincontent h2 {width: 450px; float: left; color: #3280EE; font-size: 16px;      margin: 5px; padding: 5px;  
     background: url(checkmark.jpg) no-repeat; text-align: right}

：

<div class="cols"><!-- starts column container --> 
<h2>Why Millions Turn to Us for Help</h2> 
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin <a href="#">nec massa</a> velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et ullamcorper libero mattis.  </p> 
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. <a href="#">Aenean ut nisi</a> dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p>

<div class="cols"><!-- starts column container --> 
<h2>Why Millions Turn to Us for Help</h2> 
<p>Nulla eleifend consequat pharetra. Suspendisse potenti. Donec rutrum sagittis commodo. Proin nec massa velit. Quisque volutpat, velit in sollicitudin varius, orci leo aliquet leo, ut posuere massa turpis sed erat. Duis vestibulum ipsum eu risus pretium et <a href="#">ullamcorper</a> libero mattis.  </p> 
<p>Maecenas sagittis ultricies congue. Nam non dui eu erat aliquam condimentum eget commodo mi. Donec vestibulum sem bibendum lectus tincidunt id rutrum quam egestas. Aenean ut nisi dolor. In sit amet tortor sit amet leo ultrices cursus sed vel lacus. Suspendisse ultrices, sapien id condimentum condimentum.</p> 
</div><!-- ends column container -->

として識別MainContentのメイン灰色のボックスで、次いでpは段落のためであり、H2は見出しのためのものです私は4つのパラグラフがあると言いました。 HTML内に配置されているので、2つの列にどのように表示されるのかがわかります。

出典

2011-07-16 ARGdesign12

あなたのコードの[JSFIDDLE]（http://jsfiddle.net）を作成することをお勧めします – Ibu

htmlを投稿できますか？またはibuとしてのjsfiddleは –

http://jsfiddle.net/DawK5/

<html> 
<head> 
    <style> 
     body,html{ margin:0; padding:0; } 
     #maincontent{ width:950px; margin:0 auto; border:1px solid #999; } 
     .cols{ float:left; width:453px; padding:5px; margin:5px; } 
    </style> 
</head> 
<body> 
<div id="maincontent"> 
<div class="cols"> 
      <h2>Heading 1</h2> 
    <p>content 1</p> 
</div> 
<div class="cols"> 
      <h2>Heading 2</h2> 
    <p>content 2</p> 
</div>  
</div> 
</body> 
</html>

は、この作業を行います....私はjsfiddleに精通していないですので、私はそれを使用する方法についてはよく分かりませんか？

出典

2011-07-16 03:43:10

を提案しました。私はそれを外部のCSSスタイルシートに完全に記述する必要があります。しかし、私は間違いなくあなたが示しているこれらの要素のいくつかを使用しようとし、あなたに戻って取得しようとします！ – ARGdesign12

私はhtmlコードを投稿し、あなたは私がjsfiddleで何を話しているか見ることができます。 – ARGdesign12

CSSで浮動小数点数を使って段落を積み重ねる際の問題

答えて

関連する問題