Проблема с clear: left;

Я делаю веб-страницу, но произведя HTML с класса java, но меня производит код описания, смещенный (вытекает справа от все и должно выходить под изображением): из чего он проистекает?

Я оставляю вам соединение Веба: osmarentcars.esy.es, и это формат html:

*{
  margin-bottom: 4px;
  margin-top: 4px;
}

#todo{
  width: 750px;
  height: 100px;
  font-family: "Times New Roman";
  font-size: 14;
  margin: auto;
  padding-bottom: 2px;
  background: transparent;
}

div{
  background-color: #00FFFF;
}

img{
  float: left;
  width: 96px;
  height: 60px;
}

.columna{
  float: left;
  width: 280px;
  padding-left: 5px;
}

.descripcion{
  clear: left;
}
<html>
  <head>
    <title>index.php</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <link href="estilos.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <h1><center>OSMARENTCARS - 2016 PROBANDO...</center></h1>
    <div id="todo">
      <div>
        <div>
          <img src='VEHICULO5.PNG.jpg' width='96px' height='60px'/>
        </div>
        <div class="columna">
          <b>I10</b><br/>
          <b>Precio: 12589.57</b>
        </div>
        <div class="columna" align="center">
          <u>FICHA TECNICA</u><br/> 
          Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
        </div>
        <div class="descripcion">
          Descripcion: Aqui va la descripcion del coche
        </div>
      </div>
    </div>
  </body>
</html>
1
задан 02.12.2016, 21:24
3 ответа

Он издавал вопрос, чтобы способствовать выполнимый код, и тому, чтобы была видна проблема, и я столкнулся тем, что оно, кажется, функционирует без проблем. Это код внешней веб-страницы, который не удается, потому что он отличается в разделенного, и ты не используешь класс, который у него есть clear:left.

В особенности, проблема, которая у тебя есть, состоит в том, что описание на твоей странице не в одном div с классом "описанием" и поэтому не удайся:

<div id="todo">
  <div>
    <div><img src="IMAGENES\I10.png" width="96px" height="60px"></div>
    <div class="columna">
      <b>I10</b><br>
      <b>Precio: 12589.57</b>
    </div>
    <div class="columna" align="center">
      <u>FICHA TECNICA</u><br> Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
    </div>
    Descripcion: Edición de HYUNDAI del año 2011 para circular en trayectos largos.
  </div>
</div>

Если бы вместо этого ты считал что-то этим (что является тем, что ты имеешь в вопросе), уже функционировало бы:

<div id="todo">
  <div>
    <div><img src="IMAGENES\I10.png" width="96px" height="60px"></div>
    <div class="columna">
      <b>I10</b><br>
      <b>Precio: 12589.57</b>
    </div>
    <div class="columna" align="center">
      <u>FICHA TECNICA</u><br> Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
    </div>
    <div class="descripcion">Descripcion: Edición de HYUNDAI del año 2011 para circular en trayectos largos.</div>
  </div>
</div>

Помимо этого, кажется, что ты не закрываешь хорошо div. Как это у тебя есть сейчас, div с id "все" только содержит первый элемент, оставаясь остальные снаружи. Что, что оказался совсем плохим:

<div id="todo">
   <div> AUTO </div>
</div>
<div> AUTO </div>
<div> AUTO </div>

Он должен бы быть:

<div id="todo">
   <div> AUTO </div>
   <div> AUTO </div>
   <div> AUTO </div>
</div>
2
ответ дан 24.11.2019, 12:17
  • 1
    Проблема состоит в том, что описание видит справа от все и должно начинаться под фотографией в левую сторону и занимать весь контейнер / длину css, поэтому я поместил clear: left; –  omaza1990 02.12.2016, 21:20
  • 2
    @omaza1990 как я объясняю тебе в ответе, проблема проистекает, в который descripció n он должен идти внутри одного <div class="descripcion">DESCRIPCION AQUI</div>. Иначе, не aplicará когда бы то ни было clear:left. В có я говорю, что ты помещаешь в вопросе, sí что está этот <div class="descripcion">, но в pá gina соединенный Веб не está и поэтому видят плохо. –  Alvaro Montoro♦ 02.12.2016, 21:25

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

*{
    margin-bottom: 4px;
    margin-top: 4px;
}


.todo{
    width: 750px;
    height: 100px;
    font-family: "Times New Roman";
    font-size: 14;
    margin: auto;
    padding-bottom: 2px;
    background: transparent;
}


div{
    background-color: #00FFFF;
}


img{
    float: left;
    width: 96px;
    height: 60px;
}


.columna{
    width: 280px;
    padding-left: 5px;
}


.descripcion{
    clear: left;
}
<body>
           <h1><center>COCHES DISPONIBLES PARA VENTA</center></h1>
<div class="todo">
	<div>
		<div><img src="index_files/I10.png" width="96px" height="60px"></div>
		<div class="columna">
			<b>I10</b><br>
			<b>Precio: 12589.57</b>
		</div>
		<div class="columna" align="center">
			<u>FICHA TECNICA</u><br>
			Potencia: 87&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 7.90l
		</div>
		Descripcion: Edición de HYUNDAI del año 2011 para circular en trayectos largos.
	</div>
</div>
<div class="todo">
	<div>
		<div><img src="index_files/JAZZ.png" width="96px" height="60px"></div>
		<div class="columna">
			<b>JAZZ</b><br>
			<b>Precio: 56999.02</b>
		</div>
		<div class="columna" align="center">
			<u>FICHA TECNICA</u><br>
			Potencia: 93&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 8.80l
		</div>
		Descripcion: Monovolumen pequeño con poco consumo de la marca HONDA. Perfecto para familias numerosas.
	</div>
</div>
</body>

Обрати внимание, что я изменил стиль id todo в стиль класса todo (менять CSS ты #todo в .todo). Так как ты это используешь больше раз, он мне кажется более правильным таково.

2
ответ дан 24.11.2019, 12:17
  • 1
    Проблема состоит в том, что описание видит справа от все и должно начинаться под фотографией в левую сторону и занимать весь контейнер / длину css, поэтому я поместил clear: left; –  omaza1990 02.12.2016, 21:20
  • 2
    Если закрывал хорошо div с id #todo, не harí в отсутствие помещать класс .todo. Bastarí в, с которым оставшаяся часть divs оставалась внутри. ¿ нет? –  Alvaro Montoro♦ 02.12.2016, 21:27
  • 3
    @omaza1990 Для этого он снимает тогда float: left; стиля .columna –  Awes0meM4n 02.12.2016, 21:33
  • 4
    @AlvaroMontoro ты имеешь razó n, entendí тогда зло, поскольку он считает смонтированной pá gina, но он выходит у меня, что я предполагаю, что он хочет. –  Awes0meM4n 02.12.2016, 21:34
  • 5
    Ты это не понял плохо, твоя идея - vá lida. Возможно делать двух способов :) –  Alvaro Montoro♦ 02.12.2016, 21:35

Смени на css #todo на класс .todo

<div class="todo"><div><img src="IMAGENES\JAZZ.png" width="96px" height="60px"></div>

<div class="columna">
<b>JAZZ</b><br>
<b>Precio: 56999.02</b>
</div>

<div class="columna" align="center">
<u>FICHA TECNICA</u><br> Potencia: 93&nbsp;&nbsp;&nbsp;&nbsp;Consumo: 8.80l</div>Descripcion: Monovolumen pequeño con poco consumo de la marca HONDA. Perfecto para familias numerosas.</div>
1
ответ дан 24.11.2019, 12:17

Теги

Похожие вопросы