Question

我刚刚问过这个问题并且之前有效，但现在又没有了。我有2个div（学生 - 父 - 容器和学生 - 监护人 - 其他 - 容器）我想并排使用内联：块，如果可能的话，不使用浮动。

这是HTML：

<div id="parent-and-guardian" class="tab">
    <div id="student-parent-guardian-container">
        <div id="student-parent-container">
            <fieldset id="student-father-info">
                <legend class="form-legend">Father Information</legend>
                <div>
                    <label class="form-label">Name:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label">Contact No.:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label form-label-textarea">Address:</label>
                    <textarea class="form-input-textarea form-input-long"></textarea>
                </div>
                <div>
                    <label class="form-label">Occupation:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
            </fieldset>
            <fieldset id="student-mother-info">
                <legend class="form-legend">Mother Information</legend>
                <div>
                    <label class="form-label">Name:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label">Contact No.:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label form-label-textarea">Address:</label>
                    <textarea class="form-input-textarea form-input-long"></textarea>
                </div>
                <div>
                    <label class="form-label">Occupation:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
            </fieldset>
        </div>
        <div id="student-guardian-other-container">
            <fieldset id="student-guardian-info">
                <legend class="form-legend">Guardian Information</legend>
                <div>
                    <label class="form-label">Name:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label">Relation:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label">Contact No.:</label>
                    <input type="text" class="form-input form-input-long">
                </div>
                <div>
                    <label class="form-label form-label-textarea">Address:</label>
                    <textarea class="form-input-textarea form-input-long"></textarea>
                </div>
            </fieldset>

        </div>
    </div>
</div>

这是CSS：

#student-parent-container
    display: inline-block;
}

#student-guardian-other-container
    display: inline-block;
}

以下是jsFiddle的链接：

Divs not positioning side-by-side

我希望Guardian Information位于父亲信息的右侧。

Answer 1

你没有打开{在css规则中。

CSS

#student-parent-container {
    display: inline-block;
    vertical-align: top;
}

#student-guardian-other-container {
    display: inline-block;
}

我更新了你的JS Fiddle，还为监护人div添加了一个vertical-align：

https://jsfiddle.net/LinoLinux/7x8xde43/2/

两个div没有使用display并排放置：inline-block

1 个答案: