Question

我在下方附上了一个片段。如果您以全屏模式运行代码段，您将看到我想要的效果（左侧是按钮1和2，右侧是3和4）。但是，当您使窗口变小时，按钮1和2移动到右侧和上方按钮3和4，向左移动。

我可以通过媒体查询来解决这个问题，但我认为如果没有它们，我可以更好地找出解决方法。

＆＃13;

#lower-bar {
  background-color: #0F6292;
  height: 80px;
  position: relative;
}
.center-left {
  position: relative;
  top: 50%;
  transform: translate(40%, 70%);
}
.center-center {
  position: relative;
  top: 50%;
  transform: translate(25%, 70%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<section id='lower-bar'>
  <div class='row'>

    <div class='col-md-6'>
      <div class='center-left'>
        <input type="button" id='btn-1' class=" btn c-btn-quiz" value="1">
        <input type="button" id='btn-2' class=" btn c-btn-quiz" value="2">
      </div>
    </div>

    <div class='col-md-6'>
      <div class='center-center'>
        <input type="button" id='3' class="btn c-btn-quiz" value="3">
        <input type="button" id="4" class="btn c-btn-quiz" value="4">
      </div>
    </div>

  </div>
</section>

＆＃13;

Answer 1

将此更改添加到您的代码中

#lower-bar {
  background-color: #0F6292;
  width:100%;
  height: 80px;
  position: relative;
}
.center-left {
  width:50%;
  height:auto;
  float:left;
  margin-top:30px;
 }

.center-center {
  width:50%;
  height:auto;
  float:left;
  margin-top:30px;
 }

Answer 2

也许这会有所帮助，因为看起来你可以通过使用pull-right和pull-left大大简化这一点，这是在视口之间保持相同。见Quick Floats

#lower-bar {
  background-color: #0F6292;
  padding: 10px 0;
  position: relative;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id="lower-bar">
  <div class="container">

    <div class="pull-left">
      <input type="button" id="btn-1" class="btn c-btn-quiz" value="1">
      <input type="button" id="btn-2" class="btn c-btn-quiz" value="2">
    </div>

    <div class="pull-right">
      <input type="button" id="3" class="btn c-btn-quiz" value="3">
      <input type="button" id="4" class="btn c-btn-quiz" value="4">
    </div>

  </div>
</section>

Answer 3

我认为最好的解决方案是使用弹性盒。

HttpURLConnection connection = null;
        try {
            //Create connection
            URL url = new URL("https://www.example.com/results?search_query=" + URLEncoder.encode(keyword, "UTF-8"));
            connection = (HttpURLConnection)url.openConnection();
            connection.setRequestProperty("User-Agent", "Mozilla/5.0");
            connection.setRequestProperty("Accept-Charset", "UTF-8");
            connection.setRequestProperty("content-type", "application/x-www-form-urlencoded; charset=utf-8");
            BufferedReader in = new BufferedReader(
                    new InputStreamReader(connection.getInputStream(),"UTF-8"));
            String inputLine;
            StringBuffer response = new StringBuffer();

            while ((inputLine = in.readLine()) != null) {
                response.append(inputLine);
                response.append('\r');
            }
            m_htmlDoc = response.toString();
        } catch (Exception e) {
            e.printStackTrace();
            m_htmlDoc =  null;
        } finally {
            if(connection != null) {
                connection.disconnect(); 
            }
        }

这是css

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<section id='lower-bar'>
<div class='row'>
        <div class='center-left'>
            <input type="button" id='btn-1' class=" btn c-btn-quiz" value="1">
            <input type="button" id='btn-2' class=" btn c-btn-quiz" value="2">
        </div>

        <div class='center-center'>
            <input type="button" id='3' class="btn c-btn-quiz" value="3">
            <input type="button" id="4" class="btn c-btn-quiz" value="4">
        </div>
</div>

当屏幕尺寸减小时，按钮格式变得杂乱无章

3 个答案: