css div макет с плавающей точкой

0

Я пришел от разработки макетов со столами и теперь, наконец, попробовал его с помощью div.

Но я все еще не могу правильно подобрать макет. Это не так очевидно, как таблицы. Например, у меня есть:

var html_output = 
"<div id='infoPlanet' style='width:400px;'>"+
"   <div id='gambarPlanet' style='padding: 0px; width:200px; margin-left:auto; margin-right: 200px;'>"+
"       <IMG SRC='\\Planets\\planet"+gambarPlanet+ ".jpg'>"+
"   </div>"+ 
"   <div id='kadarSehari' style='padding: 0px; width:200px; margin-left:auto; margin-right: 200px;'>"+
"       <table class='kadarPlanet'>"+
"       <tr><td>Kadar Kelahiran</td><td>"+kadarmanusia+"</td></tr>"+
"       <tr><td>Kadar Perlombongan</td><td>"+kadarkristal+"</td></tr>"+
"       <tr><td>Kadar Penjanaan</td><td>"+kadarnadir+"</td></tr>"+
"       </table>"+
"   </div>"+
"</div>"

Но из этого выходит gambarPlanet слева, а kadarSehari - справа. Как заставить kadarSehari пойти ниже gambarPlanet?

Я изменил ширину gambarPlanet на 300px, чтобы сделать gambarPlanet.width + kadarSehari.width = 300 + 200> 400, но kadarSehari просто перейдет по правой границе div (infoPlanet). kadarSehari div не хочет идти ниже gambarPlanet.

Я пробовал gambarPlanet.style.float = "top" и kadarSehari.style.float = "bottom", и до сих пор ничего не происходит. Я пробовал положение: абсолютное, положение: статическое, но это ничего не меняет.

Если вы не возражаете, какова должна быть структура, которую я должен написать, если я хочу два divs: 1) появляются рядом друг с другом (например, то, что я в настоящее время выводил, но это просто удача, я не понимаю механизм, стоящий за ней ) 2) появляются один поверх другого.

И если я хочу 4 divs: левый средний левый средний справа, как я должен писать divs?

Я могу написать это через 5 минут, и мне потребовалось 6 часов, чтобы попробовать код с помощью div, и у меня нет ничего, с чем я могу продолжать в данный момент.

Если вы можете помочь, пожалуйста, покажите мне, что делать. Надеюсь, что смогу что-нибудь сделать.

  • 4
    Сделайте jsFiddle, чтобы помочь нам решить проблему!
  • 0
    Я пытался, но я не понимаю, как заставить jsFiddle работать. Я могу прочитать примеры на jsFiddle, но не знаю, как это сделать сам. Извините, я новичок здесь. Но в любом случае, принятый ответ научил меня, как его решить!
Теги:

1 ответ

0
Лучший ответ

Если вы хотите, чтобы два div были рядом друг с другом, вам просто нужно добавить float:left; :

<div id="infoPlanet" style="width:400px;">
    <div id="gambarPlanet" style="width:200px;float:left;"></div>
    <div id="kadarSehari" style="width:200px;float:left;"></div>
</div>

Если вы хотите, чтобы второй был под первым, используйте:

<div id="infoPlanet" style="width:200px;">
    <div id="gambarPlanet" style="width:200px;"></div>
    <div id="kadarSehari" style="width:200px;"></div>
</div>

Для рабочей демонстрации см. Эту скрипку

Поделиться
  • 0
    Спасибо за этот действительно четкий минималистский ответ. Я думал, что у меня уже было это, но это не сработало. Затем я набрал один за другим и обнаружил, что у меня есть document.getElementById ("gambarPlanet"). Style.position = .... где-то, и это было то, что испортило форматирование. Я думал, что «позиция» нужна, но, судя по твоему примеру, ее нет. Так что я многому научился на вашем минималистском примере. Огромное спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню