Изображения сложены друг на друга?

Я пытаюсь создать две колонки. Один столбец слева, а другой столбец справа. Эти два столбца имеют изображение и текст, чтобы идти вместе с ним. Вместо того, чтобы каждое изображение и текст превращались в отдельный блок на отдельной строке, изображения и текст складываются друг на друга для обоих столбцов. Как я могу это решить?Изображения сложены друг на друга?

PHP/HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="test.css"?parameter="3"/> 
    </head> 

    <?php 
     $resultSet = $db->query("SELECT * FROM Articles"); 

     if ($resultSet->num_rows != 0) 
     { 
      while ($rows = $resultSet->fetch_assoc()) 
      { 
      $id = $rows["id"]; 
      $images = $rows["image"]; 
      $text = $rows["text"]; 

      echo "<div id=body>"; 
      if ($id > 3 && $id < 8) 
      { 
       echo "<div id=left>"; 
       echo "<img src=$images>"; 
       echo "<p>$text</p>"; 
       echo "</div>"; 
      } 

      if ($id > 8) 
      { 
       echo "<div id=right>"; 
       echo "<img src=$images>"; 
       echo "<p>$text</p>"; 
       echo "</div>"; 
      } 
      echo "</div>"; 
      } 
     } 
?>

CSS

#body{ 
    position: relative; 
    margin: 0 auto; 
    width: 85%; 
    height: auto; 
} 

#left{ 
    position: absolute; 
    left: 0%; 
    width: 28.33%; 
    display: block; 

} 

#left img{ 
    width: 100%; 
} 

#right{ 
    position: absolute; 
    right: 0%; 
    width: 28.33%; 

} 

#right img{ 
    width: 100%; 
}

источник

2015-12-23 Bytes

Один комментарий, примечание, если вы это сделаете, вы, скорее всего, не захотите использовать 'id', потому что значения' id' должны быть уникальными. Вместо этого используйте 'class'. – Rasclatt

Что касается стекирования, это может быть параметр 'absolute' для' position', который укладывает изображения. – Rasclatt

@Rasclatt Это из-за положения: абсолютное, но причина, по которой я использую положение, является абсолютной, потому что, если я использую позицию: относительный, правый столбец будет лежать под левым столбцом – Bytes

1.) Добавить сингулярным 'кавычки вы значений атрибутов в эхо-заявления.
echo "<img src='path-to-img'>";

2.) Если его только 2 столбцов, то CSS для левого поля должен быть

`{position:relative; float:left;width:50%} , 
    {position:relative; float:right;width:50%}`

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

3.) Именование id='body' - это плохая практика, вы должны переименовать ее.

4.) Установите CSS для display:block для обоих, а не только один из этих дивы (левый/правый)

источник

2015-12-23 05:32:00 DMSJax

Изображения находятся на их отдельных строках, но для правого столбца он начинается в той же строке, что и последнее изображение для левого столбца. Я хочу, чтобы правый столбец начинался с той же строки, что и первое изображение левого столбца – Bytes

@bytes извините, im на мобильном прямо сейчас, поэтому я не могу показать вам код ошибки, но у вас есть несколько проблем с CSS, вызывающих это. – DMSJax

Не могли бы вы рассказать мне, как я могу сделать начальную начальную колонку в той же строке, что и в моей левой колонке? – Bytes

Во-первых есть много вещей, которые добавляют, что не нужно быть. Тем не менее, попробуйте следующее:

#left{ 
    width: 28.33%; 
    display: inline-block; 
    float: left; 

} 

#right{ 
    width: 28.33%; 
    display: inline-block; 
    float: left; 
}

источник

2015-12-23 05:42:20

Это помещает изображения рядом друг с другом вместо того, чтобы иметь их каждый на их отдельных строках. – Bytes

Тогда вам нужно быть более конкретным. Я неправильно понял, что вы хотите.Что именно вы хотите сделать? –

Я пытаюсь создать страницу с тремя столбцами. В левой колонке есть изображение на одной строке, а затем текст, относящийся к этому изображению на следующей строке (изображение находится поверх текста). Правый столбец совпадает с левым столбцом только с разными изображениями и текстами. Средний столбец содержит изображение, а затем текст NEXT для изображения, это разница между средним столбцом и обоими другими столбцами. Но я не знаю, как это сделать, я пытался сделать абсолютное позиционирование, а затем установить верхнюю часть на 0%, но это только складывает изображения и тексты друг на друга – Bytes

Изображения сложены друг на друга?

ответ

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