Макет страницы PHP? - PullRequest
Новая
       6

Макет страницы PHP?

1 голос
/ 05 ноября 2011

Представьте следующие 3 опроса, представленные в избирательном центре на странице веб-сайта. Они накладываются друг на друга, спускаясь по странице. 

<?php   
    require_once('poll/poll.php');
    show_vote_control('1');

    ?><h2>Poll 2</h2><?php 
    show_vote_control('2');

    ?><h2>Poll 3</h2><?php 
    show_vote_control('3'); 
?>

Но я хочу представить их рядом на странице! Мой разум должен быть пустым, поскольку я не могу достичь в данный момент. Расположение таблицы приводит к ошибке.

Заранее спасибо за любые направления.

Ответы [ 3 ]

1 голос
/ 05 ноября 2011

Вам нужно использовать HTML и CSS для стилизации содержимого. Вы можете сделать что-то вроде следующего: 

<?php
    require_once('poll/poll.php'); // which you would put with the rest of your includes/requires
?>
<div class="clear"></div>
<div class="poll"><h2>Poll 1<h2><?php show_vote_control('1'); ?></div>
<div class="poll"><h2>Poll 2<h2><?php show_vote_control('2'); ?></div>
<div class="poll"><h2>Poll 3<h2><?php show_vote_control('3'); ?></div>
<div class="clear"></div>

И тогда ваш CSS будет выглядеть примерно так: 

.clear
{
    clear: both; // resets alignment rules
}

.poll
{
    float: left;
    // rest of the style information, like width height etc
}
0 голосов
/ 01 августа 2013

Смотрите мой пример здесь: http://jsbin.com/avabet/1/

Я предпочитаю не использовать четкие исправления.Вместо этого используйте% widths, которые равны 100% (помните правый и левый отступы и поля) и перемещайте контейнеры влево.Мне понравилось предложение использовать div вокруг тегов.

Обратите внимание: фон и поля только для иллюстрации 

.poll {
  width:31%;
  float:left;
  background:gray;
  margin: 1em 1%;
}
0 голосов
/ 05 ноября 2011

Есть ли у вас какой-либо код CSS, который имеет отношение к позиционированию реального веб-контента?

PHP будет просто визуализироваться в HTML, поэтому макет можно изменить с помощью CSS. Попробуйте стилизовать теги заголовков, чтобы они появлялись из стороны в сторону. Вы можете попробовать что-то вроде этого: 

<h2 style="position:relative;"> Poll 2 
<?php show_vote_control('2'); ?>
</h2>

на всех ваших заголовках, чтобы понять, что я имею в виду (это просто поставит их ниже друг друга). Кроме того, вы можете использовать div для того же эффекта. См. w3schools css tutorial для получения дополнительной информации о каскадных таблицах стилей.

...