如何用另一个div填充div的其余部分?
问题描述:
我有一个div
其中button
。该按钮是一个基本的Bootstrap
按钮。这里是我的代码:如何用另一个div填充div的其余部分?
<div class="generateBtn">
<button class="btn">Generate Statement</button>
</div>
的CSS看起来像这样的generateBtn
:
.generateBtn {
background: #ccc;
padding: 10px 10px 10px 30px;
}
这里是什么样子的页面上图:
我要添加div
中的信息在button
之后,我希望文本是多行并居中的。以下是我希望div
放置在页面上的方式。
我不断收到我的div
和文本直接在下面,我的文字包装错了。有人能给我一个如何添加这个想法吗?
答
试试这个工作。 DEMO at JSBin
HTML:
<div id="container">
<div id="bottomContainer">
<div id="buttonDiv">
<button id="generateButton">Generate Statement</button>
</div>
<div id="requiredDiv"> </div>
</div>
<div id="demoText">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...<p>
</div>
</div>
CSS:
#container{
position:relative;
width:800px;
height:300px;
background-color:#E2E3DE;
}
#bottomContainer{
width:100%;
height:45px;
position:absolute;
bottom:0;
background-color:#CBCBCB;
padding:10px 0;
}
#generateButton {
padding: 10px 10px 10px 20px;
}
#buttonDiv{
margin-left:10px;
background: #ccc;
float:left;
}
#requiredDiv{
width:70%;
float:left;
margin-left:200px;
height:44px;
top:15%;
position:absolute;
background-color:#9EAAB2;
}
#requiredDiv p{
top:-15%;
position: relative;
text-align:center;
color:#fff;
font-size:0.8em;
}
#demoText{
display:none;
}
的jQuery:
$("#generateButton").click(function(){
var getdivText= $("#demoText").html();
$("#requiredDiv").html(getdivText);
});
答
你可以尝试一个div内嵌套的DIV,并与文本属性设置父DIV,并添加其他类的按钮来处理填充和布局......
HTML:
<div class="parent">
<div class="generateBtn fLeft">
<button class="btn">Generate Statement</button>
</div>
<p> this is the extra copy you want to add to the location with the multi-line set up...style as needed.</p>
</div>
CSS:
.fLeft { float:left; }
.generateBtn {
background: #ccc;
padding: 10px 10px 10px 30px;
}
.parent {
background: #ccc;
overflow:auto;
}
.parent p {
-add styles for copy here as needed-
}
你需要包括你的属特德HTML,并可能是你想如何显示文本的图表。 – fontophilic 2014-12-01 18:56:35