如何使div水平溢出父div

Question

我想发一条消息，就像Stackoverflow告诉您不能在自己的问题中投票。

检查消息div的HTML，它溢出了所有的父母。如何使用父级为col div的引导程序来实现这一目标？

编辑：除了提供的答案，我还必须使用white-space: nowrap;以及因为消息中的文本保持包装到父的宽度

Answer 1

您可以使用与StackOverflow相同的内容：

HTML

<div class="message message-error message-dismissable">
  <div class="message-inner">
  <div title="close this message (or hit Esc)" class="message-close">×</div>
    <div class="message-text" style="padding-right: 35px;">
    You can't vote for your own post
    </div>
  </div>
</div>

CSS

z-index: 1;
display: none;
color: #fff;
background-color: #c04848;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
position: absolute;

JQUERY

然后是你自己的jquery，因为我猜你没有自己做StackOverflow吗？

$(document).ready(function(){
  $('.upvote').click(function() { 
    $.get('/checkownvote', { 
      user_id:     session.user_id, 
      question_id: session.question_id 
    }, 
    function(data) {
       if(data.is_own_question)
         $(this).closest('.message-error').show();
       else
         $(this).text(parseInt($(this).text)++);
    });
    return false; // prevent default
  });
});

对不起，我没有时间在jsFiddle上做，也许稍后：）

Answer 2

你可以像这样完成这个效果：

<button class="showMsg">Click Me</button>
<div id="display-message">You can't vote for your own post</div>

jquery的

$(".showMsg").click(function () {
    $('#display-message').fadeIn().delay(3000).fadeOut();
});

您还需要为display:none;设置#display-message，以便它无法启动

#display-message {
    display:none;
    color:red;
}

<强> Online Example here

======更新======

要使消息显示在您的所有内容的上方，请为其position: absolute;，如果需要，请为z-index:;。例如：

#display-message {
    display:none;
    background: #E20000;
    color: #fff;
    position: absolute;
    top: 60px;
    left: 10px;
    padding: 15px;
}

<强> Online Example here