Question

我正在尝试显示3 div内联并尝试使用容器div并将其设置为使用inline-block但是这不起作用。我错过了一些明显的东西吗？

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

Answer 1

这是你想要的吗？

features.clear();

我将两个<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;"> <form class="form-horizontal"> <fieldset> <legend>Form</legend> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6"> <label class="control-label" for="selectbasic">Fill this in</label> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Option 1</option> </select> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <label class="control-label" for="selectbasic">Option 2</label> <select id="selectbasic" name="selectbasic" class="form-control"> <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>连成一行并给了他们6列。您可以将其更改为符合您需求的内容。

Answer 2

我不清楚你在说什么“3”div，但这是我提出的解决方案。你可以在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>

Answer 3

使用表格标签并在每个td中给出每个div ...

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

3 个答案: