Jump to content
  • 0

Выравнивание картинок с подписью по горизонтали


Hosemose
 Share

Question

Добрый день!
Прошу помочь! Вставляю картинки в блок div и они прекрасно становятся по горизонтали относительно друг друга. Делаю подпись и все картинки уходят друг под друга. Что не так?

<div id="header-menu-i">                 <p>ИЗДЕЛИЯ</p>              <div id="header-menu-i-inner">                        <form>                          <img src="/images/iproduct/benz.jpeg" width="10%"><p>Бензиновые электростанции</p>                          <img src="/images/iproduct/diesel.jpg" width="10%"><p>Дизельные электростанции</p>                          <img src="/images/iproduct/gazoporshn.jpg" width="10%"><p>Газопоршневые электростанции</p>                          <img src="/images/iproduct/gazturb.jpg" width="12%"><p>Газотурбинные электростанции</p>                          <img src="/images/iproduct/zip.jpeg" width="12%"><p>Запчасти</p>                          <img src="/images/iproduct/ups.jpg" width="10%"><p>ИБП и альтернативные источники питания</p>                        </form>                </div>                </div>
#header-menu-i {                        position:absolute;                        padding-top:40px;                        padding-bottom:40px;                        left: 350px;                        width:100px;                        cursor: pointer;                        color: #434342;                        font-size: 20px;                        font-family: "FFDINWebProMedium", Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif;            -webkit-transition-duration: 0.3s;            -moz-transition-duration: 0.3s;            -o-transition-duration: 0.3s;            transition-duration: 0.3s;            -webkit-border-radius: 0 5px 5px 0;              -moz-border-radius: 0 5px 5px 0;             border-radius: 0 5px 5px 0;}#header-menu-i-inner {            position: fixed;            top: 85px;            left: 0px;            background: #FFFFFF;            width: 0px;            height: 0px;                        font-size:0px;            -webkit-transition-duration: 0.3s;            -moz-transition-duration: 0.3s;            -o-transition-duration: 0.3s;            transition-duration: 0.3s;            -webkit-border-radius: 0 0 5px 0;            -moz-border-radius: 0 0 5px 0;                            }#header-menu-i:hover {        }   #header-menu-i:hover #header-menu-i-inner {              height: 300px;                         width: 100%;                         font-size:20px;                            border-style: groove;        }
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
<div id="header-menu-i">                 <p>ИЗДЕЛИЯ</p>              <div id="header-menu-i-inner">                        <div align="center">                        <form>                         <figure><p><img src="/images/iproduct/benz.jpeg" width="10%"></p>                         <figcaption>Группа</figcaption></figure>                         <figure><p><img src="/images/iproduct/diesel.jpg" width="10%"></p>                         <figcaption>Группа</figcaption></figure>                         <img src="/images/iproduct/gazoporshn.jpg" width="10%">                         <img src="/images/iproduct/gazturb.jpg" width="12%">                         <img src="/images/iproduct/zip.jpeg" width="12%">                         <img src="/images/iproduct/ups.jpg" width="10%">                        </form>                       </div>                </div>                </div>

Все равно, сгруппированные картинки выстраиваются в столбец, а картинки без текста нормально строятся в ряд((((

Link to comment
Share on other sites

  • 0

Спасибо всем, помог совет модератора. Сделал так:

#hmii-img {display: table-cell;height: 200px;width: 200px;}
 <div align="center">                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/benz.jpeg" ><p>Бензиновые электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/diesel.jpg" ><p>Дизельные электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/gazoporshn.jpg" width="70%"><p>Газопоршневые электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/gazturb.jpg" ><p>Газотурбинные электростанции</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/zip.jpeg" ><p>Запчасти</p></div></a>                         <div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/ups.jpg" ><p>ИБП и альтернативные источники питания</p></div></a>                         </div>
Link to comment
Share on other sites

  • 0

Что-то не так у вас с порядком закрывания тегов. Сами найдёте?

Спасибо, есть такое:

<div id="hmii-img"><a href="http://192.168.21.215/"> <img src="/images/iproduct/ups.jpg" ><p>ИБП и альтернативные источники питания</p></a></div>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy