HTML Как разместить содержимое

Я пытаюсь создать «Pad», но я полностью потерял, как это сделать.HTML Как разместить содержимое

Если вы заходите в Fiddle, вы видите, что «Содержимое» дополнено. Это специально, я знаю, как это сделать со столом.

Однако, с частью javascript, включая часть, я обнаружил, что если бы я включил таблицу, все будет показано независимо от сценариев и тегов div, чего я не хочу.

Что мне нужно, это найти способ прокладки раздела, который после «Контента» выравнивается. Возможно, я неправильно построю таблицу, в этот момент мне более любопытно, как это можно сделать без использования таблиц в HTML.

Любая помощь очень ценится.

Javascript:

function selection(){ 
    var myEvaluator = addendaList.options[addendaList.selectedIndex].value; 
    var referenceNumberId = document.getElementById("referenceNumberBlock"); 
    var deliveryIdentificationId = document.getElementById("deliveryIdentificationBlock"); 
    var currencyISOCodeId = document.getElementById("currencyISOCodeBlock"); 
    var referenceTrafficId = document.getElementById("referenceTrafficBlock"); 

    if(myEvaluator == "IMP") { 
     referenceNumberId.style.display   = "block"; 
     deliveryIdentificationId.style.display = "block"; 
     currencyISOCodeId.style.display   = "none"; 
     referenceTrafficId.style.display  = "none"; 
    } else if (myEvaluator == "EXP") { 
     referenceNumberId.style.display   = "none"; 
     deliveryIdentificationId.style.display = "none"; 
     currencyISOCodeId.style.display   = "block"; 
     referenceTrafficId.style.display  = "block"; 
    } 
}

HTML

<body> 
<table width="620" align="center" cellpadding="0" cellspacing="0"> 
    <td width="160" valign="top"> 
     <b>Content</b> 
    </td> 
</table> 

    <b>Select an option: </b> 
    <select name = "code" id = "addendaList" onChange = "select()"> 
     <option value = "IMP">Import</option> 
     <option value = "EXP">Export</option> 
    </select> 

    <div ID = "referenceNumberBlock" style = "display:block;"> 
     <b>Reference Number: </b> 
      <input name = "referenceNumber" id = "referenceNumber" type = "text" size = "16" maxlength="15" value = ""> 
    </div> 

    <div ID = "deliveryIdentificationBlock" style = "display:block;"> 
     <b>Delivery Identification: </b> 
      <input id = "deliveryIdentification" name = "deliveryIDentification" type = "text" size = "16" maxlength = "30" value = ""> 
    </div> 

    <div ID = "currencyISOCodeBlock" style = "display:none;"> 
     <b>Currency ISO Code: </b> 
      <select id = "ISOCodes" name = "currencyISOCode"> 
       <option value = "MXN">MXN</option> 
       <option value = "USD">USD</option> 
      </select> 
    </div> 

    <div ID = "referenceTrafficBlock" style ="display:none;"> 
     <b>Traffic Number: </b> 
      <input name = "referenceTraffic" type = "text" size = "16" maxlength = "20" value = ""> 
    <div> 
</body>

Fiddle: http://jsfiddle.net/tL98L/4/

Обновлено Скрипки с ней решена:http://jsfiddle.net/tL98L/18/

источник

2014-05-15 Erick

Surround все, что вы хотите площадку с <div class="wrapper"> и добавить в свой CSS:

.wrapper { padding-left: 15px }

Это должно работать

источник

2014-05-15 11:00:32

Благодарим вас за быстрый ответ, однако, как можно было бы знать, насколько нужно заполнить? Вы знаете, что они говорят, дайте человеку рыбу. – Erick

Также. Что установил это было .wrapper {обивка налево: 100px} не 15. Но идея правильная – Erick

1) Используйте% на CSS, так что он будет вести себя в зависимости от размера экрана 2) С помощью JavaScript. Используя «window.screen.availWidth», вы получите доступный размер окна. Затем вы можете сделать некоторые вычисления, чтобы соответственно изменить размер заполнения. Рекомендую использовать только css, хотя –

привет Erick может у пожалуйста, попробуйте следующий код, если любая вещь еще вам нужно, пожалуйста дай мне знать.

<style type="text/css"> 
    #mydata tr td 
    { 
     padding-left:5px; 
    } 
    #mydata tr td:first-child 
    { 
     text-align:right; 
    } 
    #mydata input[type="text"] 
    { 
     width:170px; 
     height:27px;   
    } 
    select 
    { 
     width:179px; 
     height:33px; 
    } 
    #mydata input[type="text"] , select 
    { 
     padding-left:5px; 
    } 

    </style> 


<div> 
<table id="mydata"> 
<tr> 
<td>Select an Option:</td> 
<td> 
<select name = "code" id = "addendaList" onChange = "select()"> 
     <option value = "IMP">Import</option> 
     <option value = "EXP">Export</option> 
    </select> 
</td> 
</tr> 
<tr> 
<td>Reference Number:</td> 
<td><input name = "referenceNumber" id = "referenceNumber" type = "text" size = "16" maxlength="15" value = ""></td> 
</tr> 
<tr> 
<td>Delivery Identification:</td> 
<td><input id = "deliveryIdentification" name = "deliveryIDentification" type = "text" size = "16" maxlength = "30" value = ""></td> 
</tr> 
</table> 
</div>

источник

2014-05-15 11:21:44

Спасибо за ответ Prafulla. Эта реализация, к сожалению, ломает ряд вещей, главным образом, поскольку мы отправляем «стиль», это ломает JS, и я уверен, что у меня есть обход, но мне, к сожалению, не хватает роскоши найти его в данный момент , – Erick

Позвольте мне добавить и отметить, что это выглядит в 1000 раз лучше, чем у меня, и если бы у меня было время, я бы обязательно переписал все так. – Erick

HTML Как разместить содержимое

ответ

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