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

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

更新：我刚刚看到您希望宽度为 200 像素的位置；将宽度从 33.33333% 更改为 200px；

确保所有这三个其他 div 所在的 div 宽度超过 600 像素。​</p>

于 2012-12-04T14:23:33.917 回答
0

将s 设置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 回答