Question

我有HTML内容，水平和垂直居中。只要我的屏幕窗口是全尺寸，它看起来就像我想要的那样。但是，如果我缩小窗口，内容会聚集在一起。我能做些什么，以便内容随着窗口的缩小而调整，而不是聚集在一起？

这是我在水平和垂直居中的内容上使用的主要CSS ...

#one {

    #image {
    height: auto;
    width: 25%;
    }

    height: 5em;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 40%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

#two {
    height: 10em;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 60%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    }

HTML：

<body>

  <div id="my-div">

  <div id="header">
  </div>

<!-- Image and Table Name -->
    <section id="one">    
    <img src="image.png" id="image"><br><br>
    </section>

    <section id="two">
    <u id="text">Table Name:</u><br>
    <input type="text" value="Stage_Rebate_Index" id="tableNameInput" readonly><br><br>

<div id="dialog-form" title="Add Supplier ID">
  <p class="validateTips">All form fields are required.</p>

<!-- Dialog box displayed after add row button is clicked -->
  <form >
    <fieldset>
      <label for="mr_id">MR_ID</label>
      <select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
          <?php foreach($user1->fetchAll() as $user2) { ?>
            <option>
                <?php echo $user2['MR_ID'];?>
            </option>
        <?php } ?>
      </select><br><br>
      <label for="supplier_id">Supplier ID</label>
      <input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<!-- Form -->    
<form name="myForm" action="">

<!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id">

    <!-- Javascript that sets 2nd dropdown as the value of the selected value in first dropdown -->    
    <script>
    document.querySelector('#mr_id').addEventListener('change', updateSelection, false);
    document.querySelector('#mr_id').addEventListener('change', updateSelection, false);

    function updateSelection(event) {
    // Get the value from this select
    var selectedValue = event.target.value;

    // find the select object that you want to set the value for
    var selectObjectToSet = document.querySelector('#mr_id_dialog');
    selectObjectToSet.value = selectedValue;

    // Call the function that was in the onChange listener
    updatetable(this.form);
    }
    </script>

    <option selected value="select">Choose a MR_ID</option>
        <?php foreach($users->fetchAll() as $user) { ?>
            <option data-name="<?php echo $user['MR_ID'];?>">
                <?php echo $user ['MR_ID'];?>
            </option>
        <?php } ?>
    </select>
</form>

<!-- Table -->
<p> 
    <div id="table_div">
        <table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
            <thead>
                <tr class="ui-widget-header">
                <td>MR ID</td>
                <td>Supplier ID</td>
                </tr>
            </thead>
            <?php foreach($users_one->fetchAll() as $supp) { ?>
            <tr>
                <td class="mr_id"><?php echo $supp['MR_ID'];?></td>
                <td class="supp_id"><?php echo $supp['Supp_ID'];?></td>
            </tr>
            <?php } ?>
        </table>
    </div><br>

<button class="ui-button ui-corner-all ui-widget" id="insertButton">Add Supplier ID</button>
</section>

    <div id="footer">
    </div>
    </div>

</body>

Answer 1

阅读响应式设计。您需要为此目的使用视口。

private void setImageFromGoogle(final String name) { new Thread(new Runnable() { @Override public void run() { try { String url = "https://www.google.co.il/search?q=" + name + "&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjpq_CYh4jRAhXXdFAKHSOBCe0Q_AUICCgB&biw=1680&bih=920"; final Document doc = Jsoup.connect(url).userAgent("Chrome").get(); runOnUiThread(new Runnable() { @Override public void run() { StrictMode.setThreadPolicy(new StrictMode.ThreadPolicy.Builder().permitAll().build()); imageView.setImageBitmap(getImageBitmap(doc.select("[src]").get(1).attributes().get("src"))); } }); } catch (final Exception e) { e.printStackTrace(); runOnUiThread(new Runnable() { @Override public void run() { runToast(e.toString()); } }); Log.e("error", e.toString()); } } }).start(); }

允许HTML内容扩展，以便内容不会被捆绑

1 个答案: