Я пытаюсь всплыть 5 кнопок слева направо

Question

Я пытаюсь всплыть 5 кнопок слева направо

0

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

Это мой HTML-код

<div style="backgroundColorButtons">
<img src="images/white01.jpg" alt= "White Background" width="236" height="35" type='button' value='White Background' onClick="javascript:changeBGC('#ffffff');return false"
onmouseover="this.src='images/white02.jpg';" 
  onmouseout="this.src='images/white01.jpg'" 
  onmousedown="this.src='images/white04.jpg'"
  onmouseup="this.src='images/white01.jpg'" />
</div>  

 <div style="backgroundColorButtons">
<img src="images/black01.jpg" alt= "Black Background" width="236" height="35" type="button" value='Black Background' onClick="javascript:changeBGC('#000000');return false" 
onmouseover="this.src='images/black02.jpg';" 
  onmouseout="this.src='images/black01.jpg'" 
  onmousedown="this.src='images/black04.jpg'"
  onmouseup="this.src='images/black01.jpg'" />
  </div>

<div style="backgroundColorButtons">
<img src="images/red01.jpg" alt= "Red Background" width="236" height="35" type='button' value='Red Background' onClick="javascript:changeBGC('#ff0000');return false" 
onmouseover="this.src='images/red02.jpg';" 
  onmouseout="this.src='images/red01.jpg'" 
  onmousedown="this.src='images/red04.jpg'"
  onmouseup="this.src='images/red01.jpg'" />
  </div>

Есть еще две кнопки с похожим кодом
Это код CSS, который я использую;

.backgroundColorButtons{
float: left;
}

user3053505 01 дек. 2013, в 09:07

Источник

0

Мне интересно, как это работает style="backgroundColorButtons" .
Bram Vanroy 01 дек. 2013, в 09:07

Теги:

html

css

image

css-float

5 ответов

Ещё вопросы

Мне интересно, как это работает style="backgroundColorButtons" .

Roko C. Buljan · Answer 1 · 2013-12-01T05-23-00.000Z

Вместо style использования class

<div class="backgroundColorButtons">

Я также заметил, что способ использования JS для изменения состояний довольно болезнен, как для вас, так и для кого-то, кто однажды отредактирует код, и пользователь сам. На каждом событии (пока все изображения не кэшируются браузером) вы запрашиваете у сервера новый образ, что приводит к непрофессиональному временному разрыву/ожиданию - для загрузки нового изображения.

Избегайте, где это возможно (где угодно) встроенный JavaScript.
Исследуйте технику спрайтов.

Tom · Answer 2 · 2013-12-01T07-50-00.000Z

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

В примере <div class="backgroundColorButtons">

7-isnotbad · Answer 3 · 2013-12-01T06-26-00.000Z

1

#container
{display:table;width:100%;}
#row{display:table-row;}
.left{display:table-cell;padding:10px;}

html

   <div id="container">
   <div id="row">
        <div class="left">1st image</div>
            <div class="left">2nd  image</div>
            <div class="left">3rd  image</div>  
   </div>
   </div>

7-isnotbad 01 дек. 2013, в 06:26

0

@ RokoC.Buljan, о, я: D .... я просто скопировал с моей работы, где поплавок: нет; было необходимо
7-isnotbad 01 дек. 2013, в 08:05
0

Тем не менее я действительно не знаю, что не так с float:left; Это прекрасная собственность!
Roko C. Buljan 01 дек. 2013, в 08:07
0

@ RokoC.Buljan, конечно, да; но в определенных ситуациях этот код помог (по крайней мере, мне); так размещено здесь ,,,,,
7-isnotbad 01 дек. 2013, в 08:10

Показать ещё 1 комментарий

Томица Кораћ · Answer 4 · 2013-12-01T05-32-00.000Z

В вашей декларации div у вас есть недопустимый синтаксис:

<div style="backgroundColorButtons">

Если вы хотите назначить класс backgroundColorButtons для div, вам необходимо изменить его на:

<div class="backgroundColorButtons">

<div style=""> разрешено. но используется только для определения встроенного стиля, например:

<div style="float: left;">

Вы также должны рассмотреть возможность определения width для ваших плавающих элементов.

Почему width должна учитываться для float элементов?
Потому что, если ширина плавающего элемента не установлена на подходящую ширину (так что все элементы помещаются в один ряд, как требуется), может случиться, что этот плавающий элемент выдвинет следующий плавающий элемент ниже.

Nandu Hulsure · Answer 5 · 2013-12-01T08-43-00.000Z

try to use .class in place of style="backgroundColorButtons" and style="backgroundColorButtons" is not valid inline css. you can do one of the below

1. add style="float:left"  in place of style="backgroundColorButtons"

or

2. Make class name as 

<style>
.backgroundColorButtons{
float:left;
}
</style>

and remove style in div add class="backgroundColorButtons"