在一个div内取3个Div

Question

我给出了如下设计结构：

我不允许为此目的使用<table>。

我已经使用了div和div里面的div 3 div为图像中的每个1,2和3部分。

我尝试过如下设计代码：

<div style="right: 0px; position: absolute; height: 77%; width: 40%;" class="sloInputBox">
        <b>Correlations</b>
        <img alt="fullscreen" src="~/Images/fullscreen.png" style="vertical-align: top; padding-right: 55%; float: right" />
        <div id="gvCorrelationData" style="vertical-align: top; height: 60%; top: 3px" class="sloInputBox">
        </div>

        <b>Manual Correlation</b>

        <div style="vertical-align: bottom; height: 33%; bottom: 2px;" class="sloInputBox">

            <div style="float:left;width:30%;">
                <b>1.</b>
                Select a section of the observation to Correlate.
                <button onclick="ShowSelection();return false;" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Select</button>
            </div>

            <div style="margin:auto;width:30%;"> 
                <b>2.</b>
                <div class="sloInputBox" style="width: auto; height: 27%">
                  @(Html.Kendo().DropDownList().Name("ddlCode").OptionLabel("Select Code...")
                                                    .DataTextField("codeTitle")
                                                    .DataValueField("compCode").HtmlAttributes(new { style = "width:100%;" }))
                </div>
                Select a code to associate with.
                <button onclick="ResetSelectionAndManualCodeddl();return false;" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px; float: right">Reset</button>
            </div>

            <div style="float:right;width:30%;vertical-align:top;">
                <b>3.</b>
                Save this correlation.
                <button onclick="ManualCorrelation();return false;" style="background-color: #249FDA; color: white; height: 22px; width: 55px; border-radius: 4px;">Correlate</button>
            </div>

        </div>
    </div>

但是，不幸的是，此代码中的第3部分没有正确排列。

观看如下：

我也尝试设置不同的边距......但它对我没有帮助。

我该如何解决这个问题？

Answer 1

<强> HTML

<div class="n-m1" class="sloInputBox">
    <b>Correlations</b>
    <img alt="fullscreen" src="~/Images/fullscreen.png" />
    <div id="gvCorrelationData"  class="sloInputBox"></div>

    <b>Manual Correlation</b>
    <div class="sloInputBox">

        <div class="n-c1">
            <b>1.</b>
            Select a section of the observation to Correlate.
            <button onclick="ShowSelection();return false;">Select</button>
        </div>

        <div class="n-c1"> 
            <b>2.</b>
            <div class="sloInputBox" >
              @(Html.Kendo().DropDownList().Name("ddlCode").OptionLabel("Select Code...")
                                            .DataTextField("codeTitle")
                                            .DataValueField("compCode").HtmlAttributes(new { style = "width:100%;" }))
            </div>
            Select a code to associate with.
            <button onclick="ResetSelectionAndManualCodeddl();return false;">Reset</button>
        </div>

        <div class="n-c1">
            <b>3.</b>
            Save this correlation.
            <button onclick="ManualCorrelation();return false;">Correlate</button>
        </div>

    </div>

<强> CSS

.n-m1  b {
    display:block;
}

.n-c1 {
    float:left;
    width:30%;
    height:150px;
    overflow:hidden;
    position:relative;
    margin-left: 10px;
}   

.n-c1:first-child {
    margin-left:0;
 }

.n-c1 > button {
    background-color: #249FDA; 
    color: white; 
    height: 22px; 
    width: 100px; 
    border-radius: 4px;
    -webkit-border-radius: 4px;
    display:block;
    position:absolute;
    right:0;
    bottom:0;
}



.n-m1 > img {
    padding-right: 55%; 
    float: right
}

.n-m1 > img + div {
    height: 60%; 
    top: 3px;
}

<强> Code example

Answer 2

您只需要从孩子float移除div并在父div上使用display:table，在子div上使用display:table-cell。

检查 DEMO 。

Answer 3

我首先删除了margin:auto;并将所有3列设置为float:left，然后它开始有点...... jsFiddle example

Answer 4

我已经实施了一个有效的演示。Refer here

<body>
<div style="/* right: 0px; */ /* position: relative; */ /* height: 77%; */ width: auto;border: 2px dashed #f0f0f0;" class="sloInputBox"> <b>Correlations</b>
<img alt="fullscreen" src="~/Images/fullscreen.png" style="vertical-align: top; padding-right: 55%; float: right">
<div id="gvCorrelationData" style="vertical-align: top; height: 60%; top: 3px" class="sloInputBox"></div> <b>Manual Correlation</b>

</div>
<div style="vertical-align: bottom; height: 33%; bottom: 2px;width: 100%;margin-top: 19px;" class="sloInputBox">
<div style="float:left;width: 33.3%;height: 105px;"> <b>1.</b>
Select a section of the observation to Correlate.
        <br>
    <button onclick="ShowSelection();return false;" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Select</button>
    </div>
    <div style="margin:auto;width: 33.3%;float: left;"> <b style="float: left;">2.</b>

        <div class="sloInputBox" style="/* width: auto; */ /* height: 27% */">
            <select style="width: 50px;">Select box
                <option>1</option>
                <option>2</option>
            </select>
        </div>
        Select a code to associate with.
        <button onclick="ResetSelectionAndManualCodeddl();return false;" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px; float: right">Reset</button>
    </div>
    <div style="float: left;width: 33.3%;vertical-align:top;"> <b>3.</b>Save this correlation.
        <button onclick="ManualCorrelation();return false;" style="background-color: #249FDA; color: white; height: 22px; width: 65px; border-radius: 4px;">Correlate</button>
    </div>
</div>