在另一個div中對齊兩個div，沒有一個在底部並使用相對大小

我知道所有這些看起來都很困難，並且之前已經被問過很多次，但是我發現的情況並不奏效。現在，我基本上想要做這樣的事情在另一個div中對齊兩個div，沒有一個在底部並使用相對大小

| Element | Content        | 
| Element | Content two       | 
| Element | random         | 
| Element | Content lorem       | 
| Element | Content ipsum and I don't know what to | 
| Element | Content write       | 
| Element | Content        |

所以基本上用戶從左邊選擇一個項目（這不是一個選擇，它的堆積鏈接），並在右邊，他能看到的內容是什麼，他選擇。儘管如此，我希望整個頁面佔80％，左側佔20％，右側佔80％。但是，如果我把百分比分成20％和80％（這樣就使總分100％）。儘管如此，它將content div放在最底層（他可能想要畫出一些它沒有的地方）。你對我如何解決這個問題有任何想法嗎？我開始失去理智。

預先感謝您

來源

2015-04-02 Thomas Kowalski

做它添加你已經嘗試了代碼，這樣，它是一個更容易幫助你 – 2015-04-02 17:58:27

我能想到實現這個的最簡單的方法需要HTML，CSS和JavaScript（更新右邊的內容）。

創建2個div，將它們並排放置。將onclick事件附加到您的所有鏈接，這些鏈接會調用一個功能，通過ID獲取右手內容，並將其innerHTML更改爲任何您想要的內容。

function clicked(element){ 
 
    if(element.id == "one"){ 
 
     document.getElementById('right').innerHTML = 'You clicked link <b>1</b>'; 
 
    } 
 
    else if(element.id == "two"){ 
 
     document.getElementById('right').innerHTML = 'You clicked the <b>second</b> link'; 
 
    } 
 
    else{ 
 
    document.getElementById('right').innerHTML = 'Link <b>3</b> was your choice.'; 
 
    } 
 
}

html, body{ 
 
    margin:0; padding:0; 
 
    height:100%; width:100%; 
 
    text-align:center; 
 
    } 
 

 
#left{ 
 
    float:left; 
 
    width:20%; 
 
    background:#ddd; 
 
    height:100%; 
 
    } 
 

 
#right{ 
 
    float:left; 
 
    width:80%; 
 
    background:#eee; 
 
    height:100%; 
 
    } 
 

 
b{ font-size:150%; }

<div id ="left"> 
 
    <a href="#" id="one" onclick="clicked(this)">Link 1</a><br> 
 
    <a href="#" id="two" onclick="clicked(this)">Link 2</a><br> 
 
    <a href="#" onclick="clicked(this)">Link 3</a><br> 
 
</div> 
 
<div id="right"> 
 
    Content 
 
</div>

來源

2015-04-02 17:59:05

它的偉大工程，但實際上我並不想使用float ...：/ – 2015-04-03 02:36:21

你爲什麼不想使用float？ – 2015-04-03 02:53:56

因爲我總是找到互聯網或IRL上的人說：「浮動不被使用，不要使用浮動浮動是邪惡的，它會把世界帶到最後。」 – 2015-04-03 02:54:40

你試過引導？你可以用

<div class="row"> 
<div class="col-md-4"> 
</div> 

<div class="col-md-6"> 
</div> 

<div class="col-d-2"> 
</div>

來源

2015-04-02 18:03:07 pauloancheta

在另一個div中對齊兩個div，沒有一個在底部並使用相對大小

回答

相關問題