Разрешить HTML-контент для масштабирования, чтобы содержимое не было сгруппировано

У меня есть HTML-контент, который как по горизонтали, так и по вертикали. Он выглядит так, как я хочу его, когда мое окно экрана в полном размере. Однако, если я сжимаю окно, содержимое сжимается вместе. Что я могу сделать, чтобы контент корректировался при сжатии окна, а не в связке?Разрешить 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>

источник

2016-12-22 Rataiczak24

Что вы 'HTML' код? –

просто используйте левый: 50%; и удалить margin-right – Chiller

Абсолютное позиционирование - это ** очень ** плохой способ выкладки веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Читайте о адаптивном дизайне. Для этого вам нужно использовать видовое окно.

<meta name="viewport" content="width=device-width, initial-scale=1">

источник

2016-12-22 15:39:15

Разрешить HTML-контент для масштабирования, чтобы содержимое не было сгруппировано

ответ

Смежные вопросы