个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我的html是这样的
.head-heading {
padding-left: 0px;
padding-right: 0px;
font-size: 32px;
color: #525659;
margin: 0 0 2px 0;
font-weight: 100 !important;
}
.divsection .col-md-4 {
padding-left: 0px;
padding-right: 0px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.contact-smaldiv {
margin-bottom: 25px;
font-weight: 100;
font-size: 14px;
padding: 0 15px 0 0px;
}
.contact-smaldiv h1, .contact-smaldiv h2, .contact-smaldiv h3, .contact-smaldiv h4 {
color: #ef9c00;
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Lato',sans-serif !important;
padding: 0;
line-height: 1.4;
margin: 0;
}
h1.contact-name, h2.contact-name, h3.contact-name, h4.contact-name {
color: #16100f;
font-size: 14px !important;
margin: 0px 0 6px 0;
font-weight: 800 !important;
}
.contact-smaldiv p {
margin: 2px 0 3px 0;
line-height: 1.1em;
color: #414042;
font-size: 13px;
font-family: 'AkzidenzGrotesk-Medium';
font-weight: 100 !important;
}
.divsection { /* Masonry container */
column-count: 3;
column-gap: 1em;
}
.col-md-4 { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}<div class="row">
<h1 class="head-heading">What is Lorem Ipsum?</h1>
<div class="divsection">
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Why do we use it?
</h1>
<h4 class="contact-name"></h4>
<p>
<label>No:</label>
375 9777
</p>
<p>
<label>Email:</label>
<a href="mailto:dfdjff@gmail.com">
ddfdjff@gmail.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where does it come from?
</h1>
<h4 class="contact-name">
Name
</h4>
<p>
<label>Phone:</label>
052794959
</p>
<p>
<label>Cell:</label>
724 455
</p>
<p>
<label>Email:</label>
<a href="mailto:d@dummy.com">
d@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where can I get some?
</h1>
<h4 class="contact-name">
Second name
</h4>
<p>
<label>gfjgjf:</label>
375 9720
</p>
<p>
<label>Cell:</label>
4545464
</p>
<p>
<label>Email:</label>
<a href="mailto:j@dummy.com">
j@dummy.com
</a>
</p>
<p>
<label>id:</label>
<a href="mailto:t@dummy.com">
t@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
1914 translation by H. Rackham
</h1>
<h4 class="contact-name">
charity
</h4>
<p>
<label>DDI:</label>
375 9715
</p>
<p>
<label>Cell:</label>
221952
</p>
<p>
<label>id:</label>
<a href="mailto: r@dummy.com">
r@dummy.com
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Coming Soon
</h4>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Lorem Ipsum
</h4>
<p>
<label>I:</label>
3759723
</p>
<p>
<label>C:</label>
2330079
</p>
<p>
<label>id:</label>
<a href="mailto:s@dummy.com">
s@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
My name
</h4>
<p>
<label>D:</label>
3759727
</p>
<p>
<label>C:</label>
914844
</p>
<p>
<label>id:</label>
<a href="mailto:b@dummy.com">
b@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
<!-- col md end-->
</div>
<div class="clearfix"></div>
</div>
</div>如您所见，我的第一列第三个 Div 分成两列，并占据第一列和第二列，如果没有空间占用 col-md-4，我不希望出现这种情况 元素我希望它完全转到下一列，我该如何实现？
最佳答案
从积木中移除float。这会覆盖 display: inline-block 因为 float 元素会使它成为 block
.head-heading {
padding-left: 0px;
padding-right: 0px;
font-size: 32px;
color: #525659;
margin: 0 0 2px 0;
font-weight: 100 !important;
}
.divsection .col-md-4 {
padding-left: 0px;
padding-right: 0px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.contact-smaldiv {
margin-bottom: 25px;
font-weight: 100;
font-size: 14px;
padding: 0 15px 0 0px;
}
.contact-smaldiv h1, .contact-smaldiv h2, .contact-smaldiv h3, .contact-smaldiv h4 {
color: #ef9c00;
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Lato',sans-serif !important;
padding: 0;
line-height: 1.4;
margin: 0;
}
h1.contact-name, h2.contact-name, h3.contact-name, h4.contact-name {
color: #16100f;
font-size: 14px !important;
margin: 0px 0 6px 0;
font-weight: 800 !important;
}
.contact-smaldiv p {
margin: 2px 0 3px 0;
line-height: 1.1em;
color: #414042;
font-size: 13px;
font-family: 'AkzidenzGrotesk-Medium';
font-weight: 100 !important;
}
.divsection { /* Masonry container */
column-count: 3;
column-gap: 1em;
}
.col-md-4 { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
float: none;
}<div class="row">
<h1 class="head-heading">What is Lorem Ipsum?</h1>
<div class="divsection">
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Why do we use it?
</h1>
<h4 class="contact-name"></h4>
<p>
<label>No:</label>
375 9777
</p>
<p>
<label>Email:</label>
<a href="mailto:dfdjff@gmail.com">
ddfdjff@gmail.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where does it come from?
</h1>
<h4 class="contact-name">
Name
</h4>
<p>
<label>Phone:</label>
052794959
</p>
<p>
<label>Cell:</label>
724 455
</p>
<p>
<label>Email:</label>
<a href="mailto:d@dummy.com">
d@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where can I get some?
</h1>
<h4 class="contact-name">
Second name
</h4>
<p>
<label>gfjgjf:</label>
375 9720
</p>
<p>
<label>Cell:</label>
4545464
</p>
<p>
<label>Email:</label>
<a href="mailto:j@dummy.com">
j@dummy.com
</a>
</p>
<p>
<label>id:</label>
<a href="mailto:t@dummy.com">
t@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
1914 translation by H. Rackham
</h1>
<h4 class="contact-name">
charity
</h4>
<p>
<label>DDI:</label>
375 9715
</p>
<p>
<label>Cell:</label>
221952
</p>
<p>
<label>id:</label>
<a href="mailto: r@dummy.com">
r@dummy.com
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Coming Soon
</h4>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Lorem Ipsum
</h4>
<p>
<label>I:</label>
3759723
</p>
<p>
<label>C:</label>
2330079
</p>
<p>
<label>id:</label>
<a href="mailto:s@dummy.com">
s@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
My name
</h4>
<p>
<label>D:</label>
3759727
</p>
<p>
<label>C:</label>
914844
</p>
<p>
<label>id:</label>
<a href="mailto:b@dummy.com">
b@dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
<!-- col md end-->
</div>
<div class="clearfix"></div>
</div>
</div>关于html - 使用 CSS 的砌体布局 - 如何使 div 不中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43882624/
24
4
0
程序集，masm 嘿，我写了宏来打印存储在 dane1 段中的 1 字节值。 我将值除以 16，然后将提醒推送到堆栈，直到值==0。然后我弹出提醒将它们转换为 ASCII 码，并打印它们。 有人可以看
我在 Apache Geronimo 2.1.3 上有一个 Web 服务应用程序。 我正在使用 JAX-WS，使用 SOAP 1.1 注释 POJOS。 (使用 Sun JDK 1.5) 各种客户端都
我有一个数据变量，monthArray，它被多个消费者读取，并由单个定期更新程序线程定期更新数据。全部异步。 我已经考虑了这两个选项来安全地执行更新。 ArrayList tempArray
我有一组 3D 体。每个 Body 由 8 个点定义，每个点具有三个坐标。所有的物体都是立方体的或近似立方体的。我想用系统的点栅格“填充”立方体。坐标存储在简单的 data.frames 中。 我开发
我正在处理遗留代码，需要打补丁。 问题:一个古老的应用程序发送错误的 HTTP POST 请求。其中一个参数未经过 URL 编码。我知道这个参数总是排在最后而且我知道它的名字。我现在正尝试在运行在 t
我想在触摸屏幕时移动 sprite body ，但它不能发生...... -(void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
这个问题在这里已经有了答案: Can a union be initialized in the declaration? (3 个答案) 关闭 7 年前。 如果它是一个struct那么它就可以完成
我正在尝试获取生成 sigsys 信号的系统调用的地址!但我从 gcc 收到以下错误: gcc emulator.c -fms-extensions error: ‘siginfo_t’ has no
当我使用 Postman 进行 API 调用时，我收到一个 JSON 对象..这是我所期望的。 但是，当我像这样与 Guzzle 进行相同的调用时: $client = new \GuzzleHttp
在编码时，出现了差异。通常在编写简单的方法或构造函数时，我经常使用表达式体技术。但是，当我产生以下内容时: public class Sample : ISample { private r
我正在使用 LibGDX 创建一个新项目。 我想做的是，我将 tmx 文件中的主体加载到工作正常的关卡中。尸体也有一个 Sprite 。 问题是，我想让用户触摸场景中的某些 body 。当他们触摸 b
我的意图:在不使用 union 的情况下循环遍历一个结构的 30 个成员，所有成员都是字符数组类型，每个成员都存储对 itoa 的调用结果。在下面的代码中，我将结构体成员命名为a-z、A-D。在调用函
我必须将我的代码段之一从 C 转换为 java。代码如下。 union commandString{ char commndStr[20]; struct{ char
#include union NumericType { float value; int intvalue; }Values; int main() { Values.va
我在此代码中收到错误: fun num(num:Int):Int { if (num > 0){ print(num % 10) return num / 10
我是一名优秀的程序员,十分优秀！