CSS中的顶部消息框

Question

我想在我的网络应用中制作一个消息提示框。我创建了主要风格但我在小屏幕尺寸上遇到了问题。

以下是常规1366x768电脑屏幕的图像：

这是一个典型的移动设备：

的问题：

1. X按钮标有消息。
2. 主消息包装器已修复，并且当消息来自包装器时未展开。

如何解决上述两个问题？我必须走另一条道路吗？我使用position: fixed;属性值来保持我的信息。

以下是我的HTMl和CSS代码：

HTML：

    <div class="top-msg">
        <div class="top-msg-ico">
            !
        </div>
        <div class="top-msg-inner">
            <p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
        </div>
        <div class="top-msg-close" style="  cursor: pointer;">&#10005;</div>
    </div>

CSS：

.top-msg {
  width: 100%;
  height: 55px;
  position: fixed;
  background-color: rgba(42,45,50,0.6);
  color: rgba(250,251,255,0.95);
  font-family: "Lato", sans-serif;
  font-size: 18px;


}

.top-msg-close {
  float: right;
  padding-top: 17px;
  padding-right: 30px;
  //border: 1px solid white;
  //height: 100%;
  width: 3%;

}

.top-msg-inner {
  top: 15px;
  position: absolute;
  display: inline-block;
  padding-left: 10px;
  width: 80%;
  //border: 1px solid white;


}

.top-msg-ico {
  min-width: 65px;
  height: 100%;
  background-color: #fff;
  display: inline-block;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  font-size: 45px;
}

FIDDLE： https://jsfiddle.net/4oLvyajo/

更新 - 解决方案！ -

在LGSon回答了一些帮助之后，我设法完成了所有的设计，所以我接受了他的答案，但是孔解决方案在下面的小提琴中。

FIDDLE： https://jsfiddle.net/4oLvyajo/4/

图片：

Answer 1

将width: 80%替换为margin-right: 40px，您也必须使用top: 15px（在-11我看起来正确，但你可以玩周围的那个）

Here is the updated Fiddle

如果您希望所有内容都可扩展，那么您需要采用完全不同的方法。首先，如果在块元素下放置一个右浮动元素，它将向右浮动，但在它下面。您需要首先定义浮动关闭按钮元素。

Anyway, here's the updated Fiddle

填充和边距需要一些小调整，但我认为这非常接近你正在寻找的内容

Answer 2

这是你的开始

.top-msg {
  width: 100%;
  position: fixed;
  background-color: rgba(42,45,50,0.6);
  color: rgba(250,251,255,0.95);
  font-family: "Lato", sans-serif;
  font-size: 18px;
}
.top-msg-close {
  float: left;
  box-sizing: border-box;
  padding-top: 17px;
  padding-right: 30px;
  width: 45px;
}

.top-msg-inner a {
  text-decoration: none;
  color: RGBA(0, 0, 0, 0.6);
  font-weight: bold;
}

.top-msg-inner a:hover {
  color: RGBA(0, 0, 0, 0.5);
}

.top-msg-inner {
  float: left;
  box-sizing: border-box;
  padding: 0 10px;
  width: calc(100% - 110px);
}
.top-msg-ico {
  float: left;
  width: 65px;
  height: 57px;
  background-color: #fff;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  font-size: 45px;
}

<div class="top-msg">
  <div class="top-msg-ico">
    !
  </div>
  <div class="top-msg-inner">
    <p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
  </div>
  <div class="top-msg-close" style="cursor: pointer;">&#10005;</div>    
</div>