Question

基本上我有几个div，我试图对齐它们，以便它们保持一致，无论窗口的大小如何。我有一个下拉栏（testRegion），我有一个大的textarea，用户可以输入SSNS（SSNinput）。页面其余部分的大部分内容都应该是一个显示结果的表格。

我很抱歉，此刻我暂时无法访问它，所以即使有屏幕截图，我也无法向您展示我喜欢它的样子。但基本上testRegion，SSNinput和下面的按钮的高度应该等于右侧表格的高度。该表正在代码底部成功创建。（maintbl）。

<div class="pageContent row col-lg-12" style="white-space:nowrap; width:1200px;" >
    <div class="col-lg-2" style="width: 245px; display:inline-block; white-space:nowrap;">

        <div class="row" style="white-space:nowrap; display:inline-block; width:245px;">
            <select class=" btn btn-default dropdown-toggle" id="testRegion" data-toggle="dropdown" style="width:235px">
                <option value="a">Acceptance</option>
                <option value="i">Integration</option>
            </select>
        </div>

        <div class="row" style="padding-top: 8px; border: dotted; white-space:nowrap; width:245px;">
            <textarea id="SSNinput" rows="21" class="form-control" placeholder="Paste/Import SSNS Here" style="width: 235px; display: inline-block;"></textarea>
        </div>

        <div id="navbuttons" style="float: left; white-space: nowrap; padding-top: 10px; width:245px;">
            <button id="Validate" title="Validate" class="glyphicon glyphicon-play" onclick="getParticipantPlans();"></button>
            <button id="Import" title="Import" class="glyphicon glyphicon-log-in"></button>
            <button id="Export" title="Export" class="glyphicon glyphicon-log-out" onclick="ExportToExcel();"></button>
            <button id="Clear" title="Clear" class="glyphicon glyphicon-repeat" onclick="ClearArea();"></button>
        </div>
    </div>

    <div id='jqxWidget' class ="col-lg-8" style="font-size: 13px; font-family: Verdana; display: inline-block; width:800px; ">
        <div id="maintbl"></div> <!--table created here successfully.--> 
    </div>

</div>

对不起，我无法为大家提供更好的描述。从本质上讲，现在的行为是SSNinput和testRegion div得到了所有的重击而不是与表级别。我已经尝试了一堆容器div，并将空白设置为nowrap。似乎没什么用。这里的任何指导将不胜感激。谢谢。

编辑

这是附加的CSS我正在使用。

＆＃13;

#nav {

  padding-right: 10px;

  resize: none;

  max-width: 230px;

  min-width: 230px;

  float: left;

}

#thead {

  color: white;

  background-color: #0c98cf;

  font-family: Arial;

  width: 100%;

  text-align: center;

  border-radius: 10px;

}

#maintbl td {

  text-align: center;

}

#title-wrapper {

  background-color: #086387;

}

#import {

  cursor: pointer;

  font-size: 1.9em;

  background-color: #0c98cf;

  padding-top: 10px;

  padding-bottom: 10px;

  border-radius: 6px;

  padding-left: 12px;

  color: white;

}

#clear {

  cursor: pointer;

  font-size: 1.9em;

  background-color: #0c98cf;

  padding-top: 10px;

  padding-bottom: 10px;

  border-radius: 6px;

  padding-left: 12px;

  color: white;

  text-align: center;

}

#export {

  cursor: pointer;

  font-size: 1.9em;

  background-color: #0c98cf;

  border-radius: 6px;

  padding-left: 12px;

  padding-top: 10px;

  padding-bottom: 10px;

  color: white;

}

#validate {

  cursor: pointer;

  font-size: 1.9em;

  background-color: #0c98cf;

  padding-top: 10px;

  padding-bottom: 10px;

  border-radius: 6px;

  color: white;

}

#validate:hover {

  color: white;

  background-color: #808080;

}

#export:hover {

  color: white;

  background-color: #808080;

}

#import:hover {

  color: white;

  background-color: #808080;

}

#clear:hover {

  color: white;

  background-color: #808080;

}

#SSNinput {

  resize: none;

  border-radius: 0px;

  overflow-y: auto;

  display: inline-block;

  border-radius: 9px;

}

/*drop area for importing in popup window*/

#drop {

  border: 2px dashed #bbb;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

  padding: 25px;

  text-align: center;

  font: 15pt bold, "Vollkorn";

  color: #bbb;

}

＆＃13;

使嵌套的div内联并相互保持水平

0 个答案: