0
私は、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>
あなた 'HTML'コードとは何ですか？ –
ちょうど使用左：50％;余白を削除する - 右 – Chiller
絶対配置は、Webページをレイアウトする**非常に貧弱な方法です。これは非常に柔軟性がなく、より優れた応答性の高いオプションがあります。 –