按钮内容布局

Question

我想做这样的事情：

-------------------------------------------------------------
-                           |                               -
-               button1     |            button2            -
-                           |                               -
-------------------------------------------------------------
-                                                           -
-                          CONTENT                          -
-                                                           -
-------------------------------------------------------------

首先，标题为50％/ 50％2个按钮，根据我的要求，我想通过AJAX更改所有内容。

问题1 ： 我是否有义务将所有内容都放在表格中？没有权利？只需2个按钮：提交...（标题将是表单，或者......如何？）

问题2： 如何将标题放50％/ 50％？我不能。

Answer 1

问题1

不，在Ajax的情况下，没有义务使用HTML表单。单击元素后，您可以执行Ajax请求。

使用jQuery，您可能会执行以下通常的Ajax请求：

$.ajax({
    type: 'GET',
    url: 'http://example-site.com/path',
    success: function( data ){
        $.each(data, function( index, value ) {
            $("#content").html('<div>' + value + '</div>');
        });                     
    }
});

问题2

CSS中有很多选项可供选择。

选项1

有人可能正在使用inline-block：

<强> HTML

<div class="parent">
    <div class="button">Button 1</div><div class="button">Button 2</div>
</div>

<强> CSS

.button{
    display: inline-block;
    width: 50%;
    margin: 0;
}

选项2

另一种选择是使用flexbox：

.parent{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}