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％。但是，如果我把widthes放到20％和80％（这样会使父div的总数达到100％）。虽然，它把内容div放在最底层（他可能想要绘制一些它不具备的东西......）。你知道我怎么解决这个问题吗？我开始失去头发。

提前谢谢

Answer 1

我能想到实现这一点的最简单方法需要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>

Answer 2

你试过bootstrap吗？你可以用

来做

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

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

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

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

2 个答案: