如何用另一个div填充div的其余部分？

Question

我有一个div其中button。该按钮是一个基本的Bootstrap按钮。这里是我的代码：

<div class="generateBtn"> 
      <button class="btn">Generate Statement</button> 
</div> 

的CSS看起来像这样的generateBtn：

.generateBtn { 
    background: #ccc; 
    padding: 10px 10px 10px 30px; 
} 

这里是什么样子的页面上图：

我要添加div中的信息在button之后，我希望文本是多行并居中的。以下是我希望div放置在页面上的方式。

我不断收到我的div和文本直接在下面，我的文字包装错了。有人能给我一个如何添加这个想法吗？

Answer 1

试试这个工作。 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); 
    }); 

Answer 2

FIDDLE

你可以尝试一个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- 
}