How do I place divs side by side?

Question

What I want to do is to place the divs next to each other rather than how they are that they stack over each other.

side note:

I want the divs to be side by side but start from the top right of the screen adding a new lists div or taking out some depending on the screen size, but to always start the divs from right to left at the top of the screen.

li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

<div class="lists1">
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div>
<div class="lists2">
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div>
<div class="lists3">
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div>

Answer 1

为final int[] score = {0}; final Random generateG1 = new Random(); final int loadG1 = generateG1.nextInt(1000000)+10000; final TextView number = (TextView) findViewById(R.id.number); number.setText(" "+loadG1); final CountDownTimer loop = new CountDownTimer(4000, 1000) { @Override public void onTick(long millisUntilFinished) { } @Override public void onFinish() { number.setVisibility(View.GONE); final TextView prompt = (TextView) findViewById(R.id.prompt); prompt.setVisibility(View.VISIBLE); prompt.setText(" Enter the number"); final EditText input = (EditText) findViewById(R.id.enterAnswer); input.setVisibility(View.VISIBLE); input.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (event.getAction() == KeyEvent.ACTION_DOWN) { switch (keyCode) { case KeyEvent.KEYCODE_ENTER: Editable answer = input.getText(); int finalAnswer = Integer.parseInt(String.valueOf(answer)); int finalLoadG1 = Integer.parseInt(String.valueOf(loadG1)); input.setVisibility(View.GONE); prompt.setVisibility(View.GONE); if (finalAnswer == finalLoadG1) { score[0]++; } number.setVisibility(View.VISIBLE); final int loadG1 = generateG1.nextInt(1000000) + 10000; number.setText(" " + loadG1); input.getText().clear(); start(); return true; default: } } return false; } }); } }.start(); new CountDownTimer(24000, 1000) { @Override public void onTick (long millisUntilFinished) { } @Override public void onFinish() { TextView result = (TextView) findViewById(R.id.outcome); result.setText("Score: "+ score[0]); TextView prompt = (TextView) findViewById(R.id.prompt); prompt.setVisibility(View.GONE); final EditText input = (EditText) findViewById(R.id.enterAnswer); input.setVisibility(View.GONE); loop.cancel(); } }.start(); 容器提供相同的类，并在CSS中添加div，如下所示： https://jsfiddle.net/q6c34sqk/1/

编辑：使用Flexbox获得更优雅的解决方案： https://jsfiddle.net/q6c34sqk/2/

float:right

CSS

<div class="main-contain">
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 9</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 7</li>
    </ul>
  </div>
</div>