Создание кнопки с Divs

Question

Я создаю кнопку с тремя div. первый div имеет левое изображение, второй div, который находится посередине, имеет растянутое изображение, зависит от ширины текста, а затем правый div, имеющий изображение справа.

Вот как это делается

Это JsFiddle code я пытаюсь создать кнопку. но div не отображается правильно. Если я просто помещаю изображения вместе без div, то я могу видеть изображения. Может ли кто-нибудь сказать мне, как я могу сделать кнопку с тремя div? Я не разработчик интерфейса, но эта вещь возникла в моем проекте, и я должен работать над этим. Благодаря

<div class="container" > 

     <div id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"></div> 
     <div id='backgrounddiv'>Click me<img src="http://i.share.pho.to/0ffe9c14_o.png"></div> 
     <div id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"></div> 

    </div> 

Answer 1

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

#container{ 
    display:inline-block; 
} 
#leftdiv{ 
    float:left; 
} 
#backgrounddiv{ 
    background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x; 
    float:left; 
    height:70px; 
    padding:10px; 
    line-height:70px; 
} 
#rightdiv{ 
    float:left; 
} 

см фиксированный код: http://jsbin.com/tuzipiyupo/4/edit

Answer 2

Просто удалите style="visibility:hidden" из <div class="container" style="visibility:hidden">

Это будет скрывать свой DIV.

Проверьте Fiddle здесь.

Edit:

HTML:

<div class="container" id="button"> 

    <div id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"/></div> 
    <div id='backgrounddiv'>CLick Me </div> 
    <div id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"/></div> 

    </div> 

CSS:

.container{ 
    display:inline-block; 
} 


#leftdiv{ 
    float:left; 
} 
#backgrounddiv{ 
    background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x; 
    float:left; 
    height:70px; 
    padding:10px; 
    line-height:70px; 
} 
#rightdiv{ 
    float:left; 
} 

Script

document.getElementById("button").onclick = function(){ 
    alert("click"); 
} 

http://jsfiddle.net/a19fm2hn/9/

Answer 3

Удалить

style = "visibility: hidden"

line from parent div.Почему вы используете функциональные возможности div для кнопок.

Answer 4

Hi I have updated your code Here is the link : http://jsfiddle.net/Maheshkonduru/a19fm2hn/10/ 

Css 
#backgrounddiv{ 
    background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x; 
    height:70px; 
    padding:10px; 
    line-height:70px; 
    cursor:pointer; 
} 

.container > div { 
    float: left; 
    display:block 
} 

#leftdiv { 

    float: left; 
    width: 25px; 
} 

HTML 
<div class="container">  
     <div id='leftdiv'><img src="http://i.share.pho.to/ff6cc4e3_o.png"></div> 
     <div id='backgrounddiv'>Click me</div> 
     <div id='rightdiv'><img src="http://i.share.pho.to/245be416_o.png"></div> 

    </div> 

Answer 5

В то время как вы уже (на момент написания) принял другой ответ, я хотел бы предложить следующий подход вместо (если необходимо использовать изображения):

button { 
 
    width: 500px; 
 
    /* using the 'main' background as the background-image: */ 
 
    background-image: url(http://i.share.pho.to/0ffe9c14_o.png); 
 
    /* repeating horizontally */ 
 
    background-repeat: repeat-x; 
 
    /* removing the default border, padding and margin: */ 
 
    border-width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    /* setting the line-height, and height, equal to the 
 
    the height of the images we're using, to vertically 
 
    center the text within the button: */ 
 
    line-height: 90px; 
 
    height: 90px; 
 
} 
 

 
/* using CSS pseudo-elements to insert the left, and 
 
    right, images: */ 
 
button::before { 
 
    content: url(http://i.share.pho.to/ff6cc4e3_o.png); 
 
    float: left; 
 
} 
 
button::after { 
 
    content: url(http://i.share.pho.to/245be416_o.png); 
 
    float: right; 
 
}

<button>Click here</button>