CSS информационное окно с кнопкой

Я пытался получить эту работу правильно, и я не уверен, что это решение является правильным ..CSS информационное окно с кнопкой

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

Это в основном коробка с кнопкой и некоторая информация .. это самый простой способ сделать это?

.actionbox { 
    width:90%; 
padding-top:20px; 
padding:20px; 
    background-color: #999999; 
    border-left:10px solid #2ecc71; 
    display:inline-block; 

    } 

.ashbox{background-color:#34495e;color:white;} 


.button{ 
display: inline-block; 
    font-weight: normal; 
    text-align: center; 
    vertical-align: middle; 
    cursor: pointer; 
    background-image: none; 
    border: 1px solid transparent; 
    white-space: nowrap; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.428571429; 
    border-radius: 4px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
    font-family:'PT Sans',helvetica; 

} 
h1 { margin:0} 
.button,.button.green{background:#69c773;color:#FFF;-webkit-box-shadow:0 4px 0 0 #51a65f;-moz-box-shadow:0 4px 0 0 #51a65f;box-shadow:0 4px 0 0 #51a65f;} 

.floatright {float:right;} 
.floatleft {float:left;}

HTML

<div style="width:800px; margin:0 auto;"> 
<div class="actionbox ashbox"> 

<h1 class="floatleft">Open Box</h1> 
<a href="test.html" class="button floatright">Learn More Info</a> 

</div> 
</div>

Working Demo JSFIDDLE

источник

2014-01-17 op1001

Yep это хорошо :) – rrugbys

вопрос для меня, когда я пытаюсь добавьте картинку, которая закручивает вещи вверх. вот так http://jsfiddle.net/6LHrD/1/ Я пытаюсь получить кнопку под заголовком, но она добавляет много места – op1001

вы хотите, как это http://jsfiddle.net/rahulsharma2r/6LHrD/2/ – rrugbys

Ваш демо вы дали два div

Вы можете пропустить один div и добиться того же ... Наслаждайтесь Demo :)

http://jsfiddle.net/6LHrD/3/

я добавил этот CSS

margin:0 auto; 
display:table;

в .actionbox класс

После добавления изображения http://jsfiddle.net/6LHrD/7/

источник

2014-01-17 06:33:21

Если я пытаюсь добавить картинку, не добавляя дополнительные div (не то, чтобы это было важно) Я получаю что-то вроде этого. http://jsfiddle.net/6LHrD/1/ будет очищать работу поплавков? – op1001

@ op1001 я работаю над этим ... обновить u скоро –

@ op1001 i ahve отредактировал мой ответ. Можете ли вы посмотреть в него –

CSS информационное окно с кнопкой

ответ

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