Question

我试图将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

--------------------     --------------------     --------------------

Answer 1

仅仅因为你无法更改样式表，并不意味着你必须使用丑陋的内联样式。

将此添加到您的<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。（从技术上讲，我认为你可以在标题之外使用它，但尽量不要）

Answer 2

试试这个：

<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/

Answer 3

 <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 -->

DEMO： http://jsfiddle.net/EnkP5/

更新：我刚看到你想要宽度为200px的地方;将宽度从33.33333％更改为200px;

确保所有其他三个div都存在的div超过600px宽。

Answer 4

将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>

用标题排列Div

4 个答案: