在另一个div中对齐两个div，而没有一个在底部并使用相对大小

Question

我知道所有这一切似乎都相当困难，并且已经被问过很多次了，但是我发现的情况不起作用。 现在，我基本上想做这样的事情

| 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％（因此总共占父div的100％）。 但是，它将内容div放在底部（他可能想画一些它没有放置的内容……）。 您是否知道我该如何解决？ 我开始脱发了。

先感谢您

Answer 1

我想到的最简单的方法是使用HTML，CSS和JavaScript（以更新右侧内容）。

创建2个div，并排放置它们。 将onclick事件附加到调用函数的所有链接上，该函数通过ID获取右侧sie内容并将其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> 

Answer 2

您是否尝试过引导程序？ 你可以做到

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

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

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