2つのdivをjQuery UIのダイアログウィジェットに追加する方法

私のプロジェクトでjQuery UIを選択しました。そして、div1とdiv2という名前の2つのdivが1つのダイアログに必要です。2つのdivをjQuery UIのダイアログウィジェットに追加する方法

Div1とdiv2は同じ水平線にする必要があります。 1つのDIVでDIV1とDIV2であれば、私は

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

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

を選択することができますしかし、jQueryのUIで、CSSのDIV {フロート：左}が動作することはできません。私は誰が私を助けることができ、それについては考えている

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

：私が試してみました

<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>

：はここに私のjQueryのUIコードのですか？ダイアログのコンテナ<div>である親のdiv、上

.divclass div{float:left}

ていますが、その子のdivの上floatを適用する必要があります。

出典

2017-09-04 stack

'フレックス表示は' を追加します。

出典

2017-09-04 09:28:42 JDK92

あなたのコードの問題は、あなたが適用されています。

はこれを試してみてください：

HTML：

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

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

のCss：あなたの外側のdivの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

2つのdivをjQuery UIのダイアログウィジェットに追加する方法

答えて

関連する問題