个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试为移动设备制作一个简单的页面。
有标题文本，然后是顶部的文本、底部的文本和手机图像，它悬停在两个文本(顶部和底部)上。
我曾尝试使用 Twitter Bootstrap 来实现这一点，但我的结果还不够好，可能是因为我根本不了解 CSS 中的溢出。
所以这就是我想要实现的目标:http://i.imgur.com/ds2CC2m.png
在这里你可以看到发生了什么:http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview
或者你可以在这里检查很多丑陋的代码:
<style type="text/css">
.text p {
padding-left: 15px;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div style="position: relative;">
<div class="row" style="background-color:#E4F6FC;">
<div class="col-md-3" style="margin:10px">
<p>Logo</p>
</div>
</div>
<div class="row " style="background-color:#E4F6FC;">
<div class="col-md-3 " style="color:#00AAE3;width: 100%;padding-right:0;height: 100%;position:absolute;z-index: 11;top: 0;left: 0;margin-top: 15%">
<p>My</p>
<p>default</p>
<p>text</p>
</div>
<div class="col-md-3" style="padding:0;height: 100%;top: 0;left: 0;margin-top:-5%;float:right;z-index: 12;">
<img src="http://i.imgur.com/qYV93nS.png">
</div>
</div>
<div class="row">
<div class="col-md-3 text" style="padding-top:10px;padding-bottom:10px;color:#FFFFFF;background-color:#00AAE3;padding-right:0;height: 100%;top: 0;left: 0;z-index: 10;top: 0;left: 0;margin-top:-45%">
<p>and few</p>
<p>lines of great</p>
<p>lorem ipsum</p>
<p>here</p>
<button type="button" style="margin-left: 15px;border-radius: 20px;border-color: #FFFFFF;background: none;color:#FFFFFF;" class="btn">
AWESOME BUTTON
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
对于您看到的困惑以及对您的眼睛造成的伤害，我深表歉意:с
最佳答案
两个建议:
1) 让您的手机和您想要的文本在同一个位置对齐:绝对对齐，这样它就会始终保持在同一个位置。确保您的 z 对齐正确，以便手机位于顶部。
2) 我认为您的问题必须处理您的 col-md 无法在智能手机上运行的事实!它仅适用于屏幕 md 和更高版本。要影响小于 749 像素的屏幕，请使用 col-sm 和 col-xs。
新网格适用于 12，因此请利用它来让您的行按照您想要的方式排列。示例:
<div class="col-lg-2 col-md-1 col-xs-1"></div>
希望这能让您走上正确的轨道——不确定您想要获得什么。
关于css - 如何仅在移动设备上使一个 div 超过两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23351636/
25
4
0
我是一名优秀的程序员,十分优秀！