如何用另一個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- 
}