1. 首页
  2. 问答
  3. 如何在此示例中显示div内联

如何在此示例中显示div内联

2016-10-04 32 views
0

我试图显示3 div s内联并尝试使用容器div并将其设置为使用inline-block但是，这并不奏效。我是否错过了明显的东西？如何在此示例中显示div内联

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div class="tablebox" id="box1" style="display: inline-block; border: solid 1px black; width:500px; height:200px;"> 
 
     <form class="form-horizontal"> 
 
      <fieldset> 
 
       <legend>Form</legend> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Fill this in</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Option 2</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
          <option value="2">Option 2</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div id="example"> 
 
     <div style="width:100%; white-space:nowrap;"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
     </div> 
 
     <div id="wrapping"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      <div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
       <p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">Sort these</span></p> 
 
      </div> 
 
      <div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2016-10-04 John Tiso

+2

你的标签是**所有的地方**。 –

+0

你试图使内联完全一致吗？ –

+0

float：left？ – Tester

回答

-4

使用table标签，并给每个TD每个格...

来源

2016-10-04 08:33:52 rch

+0

听起来像它应该工作，不知道为什么我没有想到这一点。谢谢 –

+0

实现了这一点，并运行良好 –

+0

这增加了更多的标记。 – lharby

0

难道这样的事情，你想要什么？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="tablebox" id="box1" style="display: inline-block; border: solid 1px black; width:500px; height:200px;"> 
 
\t <form class="form-horizontal"> 
 
\t \t <fieldset> 
 
\t \t \t <legend>Form</legend> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t \t \t <label class="control-label" for="selectbasic">Fill this in</label> 
 
\t \t \t \t \t <select id="selectbasic" name="selectbasic" class="form-control"> 
 
\t \t \t \t \t \t <option value="1">Option 1</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t \t \t <label class="control-label" for="selectbasic">Option 2</label> 
 
\t \t \t \t \t <select id="selectbasic" name="selectbasic" class="form-control"> 
 
\t \t \t \t \t \t <option value="1">Option 1</option> 
 
\t \t \t \t \t \t <option value="2">Option 2</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </fieldset> 
 
\t </form> 
 
</div> 
 
<div id="example"> 
 
\t <div style="width:100%; white-space:nowrap;"> 
 
\t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
      </span> 
 
\t </div> 
 
\t <div id="wrapping"> 
 
\t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
      </span> 
 
\t \t <div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;"> 
 
\t \t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
       </span> 
 
\t \t \t <p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
       Sort these</span></p> 
 
\t \t </div> 
 
\t \t <div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;"> 
 
\t \t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
       </span> 
 
\t \t </div> 
 
\t </div> 
 
</div>

我把这两个select连胜，给了他们6列。您可以将其改为适合您的需求。

来源

2016-10-04 08:39:52 RasmusGlenvig

0

我不清楚你在说什么“3”divs，但这里是我提出的解决方案。您可以在google上查看更多关于“flex”的信息，“display：flex”可以成为真正的保护者！

.form-group { 
 
    padding: 5px; 
 
} 
 

 
#inner_wrapper { 
 
    display: flex; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div class="tablebox" id="box1" style="border: solid 1px black; width:500px; height:200px;"> 
 
     <form class="form-horizontal"> 
 
      <fieldset> 
 
       <legend>Form</legend> 
 
       <div id="inner_wrapper"> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Fill this in</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Option 2</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
          <option value="2">Option 2</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div id="example"> 
 
     <div style="width:100%; white-space:nowrap;"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
     </div> 
 
     <div id="wrapping"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      <div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
       <p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">Sort these</span></p> 
 
      </div> 
 
      <div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

来源

2016-10-04 09:52:54 coffeeak

相关问题

 相关问题