0

私は3つのdivを並べて積み重ねようとしています。これがサンプルのdivです

<!-- This is first div -->
<div id="divone" style="text-align: center;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
   <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
   </div>
</div>
<!-- Similarly I need two more divs to be aligned sidebyside with div one -->

インラインCSSを使用してそれを行うにはどうすればよいですか? 各 div の幅は 200px で、高さに制限はありません。

出力必須

--------------------    --------------------       --------------------
DIV ONE                    DIV TWO                      DIV THREE
--------------------     --------------------      --------------------


FORM ELEMENT                FORM ELEMENT                FORM ELEMENT

--------------------     --------------------     --------------------
4

4 に答える 4

2

スタイルシートを変更できないからといって、醜いインライン スタイルを使用しなければならないわけではありません。

これをあなたに追加してください<head>：

<style>
.three-columns{
  width: 100%; /* or any width you like */
}
.three-columns .column{
  float: left;
  width: 33%; /* or less if you're using margins, padding, borders, etc */
}
</style>

次に、ページで、

<div class="three-columns">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

追加の CSS はすべて、head のスタイル タグ内で実行できます。(技術的にはヘッダー外でも使えると思いますが、使わないようにしてください)

于 2012-12-04T14:24:30.097 に答える
1

これを試して：

<ul style="list-style: none;"> 
<li>
    <div id="divone" style="">
        <span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
           <div style="text-align: center;">
             <form action="https://www.somesomesomesome.com" method="post">
             </form>
           </div>
    </div>
</li>    
<li>
     <div id="divtwo" style="">
        <span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
           <div style="text-align: center;">
             <form action="https://www.somesomesomesome.com" method="post">
             </form>
           </div>
    </div>
</li>    
<li>
     <div id="divthree" style="t">
        <span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
           <div style="text-align: center;">
             <form action="https://www.somesomesomesome.com" method="post">
             </form>
           </div>
    </div>
</li>

デモはこちら: http://jsfiddle.net/7MZqN/

于 2012-12-04T14:40:48.423 に答える
0 
 <div id="divone" style="text-align: center; width:33.33333%; float:left;">
  <span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div>
  <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
  </div>

 <div id="divtwo" style="text-align: center; width:33.33333%; float:left;">
  <span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div>
  <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
  </div>

 <div id="divthree" style="text-align: center; width:33.33333%; float:left;">
  <span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div>
  <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
  </div>

  <div style="clear:both;"></div><!-- this is a clearfix div -->

デモ: http://jsfiddle.net/EnkP5/

更新：幅を200pxにしたい場所を見ました。幅を 33.33333% から 200px に変更します。

これら 3 つの他の div がすべて含まれる div の幅が 600px を超えていることを確認してください。</p>

于 2012-12-04T14:23:33.917 に答える
0

次のように、 を並べて配置するように設定display: inline-block;します。div

<div id="divone" style="text-align: center; display: inline-block; width: 200px;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
   <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
   </div>
</div>

<div id="divtwo" style="text-align: center; display: inline-block; width: 200px;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
   <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
   </div>
</div>

<div id="divthree" style="text-align: center; display: inline-block; width: 200px;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
   <div style="text-align: center;">
     <form action="https://www.somesomesomesome.com" method="post">
     </form>
   </div>
</div>
于 2012-12-04T14:24:19.767 に答える