Question

我是一名菜鸟CSS程序员，我需要一些帮助。这是两个截图：

和

我需要在选项卡区域中正确定位div中存在的树和TinyMCE编辑器。如您所见，底部选项卡边框非常高，而不是在树和编辑器下方。

这是我的HTML代码：

@{
    ViewBag.Title = "Demo";
}

<link href="../../Plugins/jqueryui/css/jquery-ui.css" rel="stylesheet"/>
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/jstree/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/skin.min.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/content.min.css" rel="stylesheet" type="text/css" />

<h2>Demo</h2>

<fieldset>
    <legend>Select a language: </legend>

    <label for="mk-MK">MK</label>
    <input type="radio" name="langid" value="mk-MK" id="mk-MK" checked>

    <label for="en-US">EN</label>
    <input type="radio" name="langid" value="en-US" id="en-US">

    <br/>
    <br/>
    <div id="tabs">
        <ul>
            <li><a id="t1" href="#tabs-1">First</a></li>
            <li><a id="t2" href="#tabs-2">Second</a></li>
            <li><a id="t3" href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">
            <select name="domainSelect" id="domainSelect">
            </select>
            <br />
            <br />
            <select name="surveySelect" id="surveySelect">
            </select>
            <br />
            <br />
            <input type="text" id="clFreqText"/>
            <br />
            <br />
            <select name="clPeriodSelect" id="clPeriodSelect">
            </select>
            <br />
            <br />
            <select name="clYearSelect" id="clYearSelect">
            </select>
            <br />
        </div>
        <div id="tabs-2">
            <div class="treeBlock">
                <div id="jstree_div"></div>

            </div>
            <div class="editorBlock">
                <textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
            </div>
        </div>
        <div id="tabs-3">

        </div>
    </div>
    <p>
        <input type="button" value="Next" id="nextBtn" />
        <input type="button" value="Previous" id="prevBtn" />
    </p>
    <p id="statusMsg"></p>
    <p id="errorsMsg"></p>

</fieldset>

<script src="../../Plugins/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../Plugins/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Plugins/jstree/jstree.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/theme.min.js" type="text/javascript"></script>
<!-- other scripts -->

而style.css包含：

fieldset {
      border: 0;
}

label {
      display: block;
      margin: 30px 0 0 0;
}

.overflow {
      height: 200px;
}

.treeBlock 
{
    border: 1px solid Grey;
    padding: 10px 10px;
    overflow: auto;
    float: left;
    height: 350px;
    width: 350px;
    margin: 10px 30px 10px 10px;
}

.editorBlock 
{
    overflow: auto;
    float: right;
    height: 350px;
    width: 350px;
    margin: 10px 30px 10px 10px;
}

有人可以告诉我为什么jquery ui tabs的大小不合适吗？

注意：我正在使用MVC 4 / C＃和Razor进行编码，因此文件扩展名为＆＃34; cshtml＆＃34;来自我的观点

当我将宽度更改为50％，50％时会出现这种情况。＆＃34;下一个＆＃34;和＆＃34;以前＆＃34;按钮应该在下面。

Answer 1

在tabs-2的css规则中添加以下规则：

overflow:auto

由于浮动子div，这将解决高度渲染问题。

Answer 2

尝试使用width:100%的表格和40％，20％，40％的列。

Answer 3

我改变了我的html：

<div id="tabs">
        <ul>
            <li><a id="t1" href="#tabs-1">Info</a></li>
            <li><a id="t2" href="#tabs-2">Content</a></li>
            <li><a id="t3" href="#tabs-3">Summary</a></li>
        </ul>
        <div id="tabs-1">
            <select name="domainSelect" id="domainSelect">
            </select>
            <br />
            <br />
            <select name="surveySelect" id="surveySelect">
            </select>
            <br />
        </div>
        <div id="tabs-2">
            <div class="treeBlock">
                <div id="jstree_div"></div>
            </div>
            <div class="editorBlock">
                <input type="text" value="" id="editorTitleTxt" disabled="disabled"/>
                <div class="editor">
                    <textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
                </div>
            </div>           
        </div>
        <div id="tabs-3">
            <textarea rows="10" cols="10" id="summaryText" disabled="disabled">Next, get a free TinyMCE Cloud API key!</textarea>
        </div>
    </div>

我的CSS：

fieldset {
      border: 0;
}

label {
      display: block;
      margin: 30px 0 0 0;
}

.overflow {
      height: 200px;
}

.treeBlock 
{
    overflow: auto;
    height: 500px;
    width: 38%;
    float: left;
    border: 1px solid Grey;
    margin: 5px;
}

.editorBlock 
{
    overflow: auto;
    height: 500px;
    width: 60%;
    margin: 5px;
}

#editorTitleTxt 
{
    width: 98%;
    font-weight:bold;    
}

看起来像这样：

正确地将两个div放在jQuery UI选项卡中？

3 个答案: