如何將兩個div添加到jQuery UI的對話框小部件中

我在我的項目中選擇了jQuery UI。我需要兩個在一個對話框中命名爲div1和div2的div。如何將兩個div添加到jQuery UI的對話框小部件中

Div1和div2應該在同一水平線上。如果DIV1和一個DIV DIV2，我可以選擇

<style> 
.divclass div{float:left} 
</style> 

<div class="divclass"> 
<div> 
    div1 
</div> 
<div> 
    div2 
</div> 
</div>

但在jQuery用戶界面，CSS的div {浮動：左}不能工作。這裏是我的jQuery UI代碼：

<script> 
$(function(){ 
$("#dialog").dialog({ 
    height:450, 
    width:800, 
    show: { 
    effect: "blind", 
    duration: 100 
    }, 
    hide: { 
    effect: "explode", 
    duration: 1000 
    } 
}); 
}); 
</script> 
<div id="dialog" title="basicDLG"> 
<p>jqueryui test</p> 
<div style=""> 
    div1 
</div> 
<div> 
    div2 
</div> 
</div>

我曾嘗試：

<style> 
.jui div{float:left} 
</style> 
<div id="dialog" title="basicDLG" class="jui">

我都不知道，誰能幫幫我？

來源

2017-09-04 stack

添加 '顯示：柔性' 你外的div CSS還可以做的工作。

來源

2017-09-04 09:28:42 JDK92

與您的代碼的問題是要應用：

.divclass div{float:left}

在父DIV，這是對話的容器<div>，但你必須申請其子女的div的float。

試試這個：

HTML：

<div id="dialog"> 
    <div id="left">Left</div> 
    <div id="right">right</div> 
</div> 

<a href="#" id="open">Open dialog</a>

的CSS：

<style> 
#left { 
    float:left; 
} 
#right { 
    float:right; 
} 
</style>

來源

2017-09-04 09:27:12

我想這就是你要求的。

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Dialog - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#dialog").dialog(); 
 
    }); 
 
    </script> 
 
    <style> 
 
    .jui div{ 
 
    float:left; 
 
    border:2px solid red; 
 
    margin:3px;} 
 
    </style> 
 
</head> 
 
<body> 
 
    
 
<div id="dialog" class="jui" title="Basic dialog"> 
 
<div>div1</div><div>div2</div> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

我不知道你是怎麼想這

.jui div{float:left}

，但它工作正常

來源

2017-09-04 09:29:25

如何將兩個div添加到jQuery UI的對話框小部件中

回答

相關問題