以3個Div的一個DIV

裏面我有如下設計結構給出：以3個Div的一個DIV

enter image description here

我不允許使用<table>用於此目的。

我已經使用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>

但unfortunatele第3節在此代碼是不符合獲得正確。

其觀看如下：

enter image description here

我也試着設置不同的margines ...但它不會幫我。

我該如何解決這個問題？

來源

2014-06-25 C Sharper

肯定看起來是與容限或填充相關。你應用了什麼盒子尺寸的方法？你在使用百分比寬度嗎？請粘貼您的HTML和CSS :) –

如果您在縮小寬度時跳轉，那麼您可以從那裏開始。檢查邊距，填充，寬度尺寸。 – CyberDude

@CyberDude我已經嘗試寬度高達20％內部的第一個兩個div ...但第三個div不是內聯 –

您只需從子div中刪除float，並在子div上使用display:table，在子div上使用。

檢查DEMO。

來源

2014-06-25 06:47:59

我開始通過刪除margin:auto;，並設置所有3列float:left，並開始小幅工作...：jsFiddle example

來源

2014-06-25 06:48:40 CyberDude

HTML

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

來源

2014-06-25 06:48:49 midstack

我實現了一個工作演示。 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>

來源

2014-06-25 07:23:13 malcolmX

以3個Div的一個DIV

回答

相關問題