我正在尝试使div覆盖屏幕的整个宽度,以使屏幕的部分着色。
这是在wordpress上的,我不确定如何填充整个区域。 (访问我们/交易/立即预订部分无法按我想要的方式工作)
编辑 CSS代码已更新,但仅达到页面宽度的一半
body {
margin: 0;
}
section {
float:left;
overflow:auto;
width:100%;
}
.visit {
position:absolute;
left:0;
display: flex;
margin-left:-55px;
}
table {
width:100%;
padding-left: 0px;
}
tr {
padding:0px;
margin:0px;
border-width:0px;
background-color:#15b6b8;
}
td {
width:33%;
height:30%;
}
td h4 {
text-align:center;
}
input {
text-align:center;
width:80%;
}
<code>
<section class="1">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<table width="100%">
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map--></td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture --></td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3"><input name="qname" type="text"
placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form></td>
</tr>
</tbody>
</table>
</div>
</section>
</code>
此代码result
答案 0 :(得分:0)
在这种情况下,您的代码位于container
内部,它是引导程序类。为了实现您想要的目的,您可以在wrapper
外部放置一个container
并设置background-color
。
.wrapper {
background-color: green;
height:50px;
}
.container>div{
background-color:yellow;
height:50px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<!-- Your content -->
<div>This is a sample Content</div>
</div>
</div>
答案 1 :(得分:0)
您可以将absolute
放置在左侧边框上,如下所示:
section {
width: 100%;
padding: 0px;
margin: 0px;
border-width: 0px;
}
table {
width: 100%;
position: absolute;
left: 0;
}
tr {
padding: 0px;
margin: 0px;
border-width: 0px;
background-color: #15b6b8;
}
td {
width: 33%;
height: 30%;
}
td h4 {
text-align: center;
}
input {
text-align: center;
width: 80%;
}
<section class="1">
<div class="description">
<h3>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="visit">
<table width="100%">
<tbody>
<tr>
<td>
<h4>Visit Us</h4>
<!--map-->
</td>
<td>
<h4>Today's Deal</h4>
<!-- Deal Picture -->
</td>
<td>
<h4>Book Now</h4>
<form data-myki-checked-cc="3"><input name="qname" type="text" placeholder="Name" />
<input name="qemail" type="text" placeholder="Email" />
<input name="qphone" type="text" placeholder="Phone Number" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
</section>
答案 2 :(得分:0)
library(tidyverse)
df1 %>%
filter(gear %in% c(3, 5) ) %>%
spread(gear, newvar) %>%
transmute(newvar = `3` - `5`)
# A tibble: 3 x 2
# Groups: cyl [3]
# cyl newvar
# <dbl> <dbl>
#1 4 -1.19
#2 6 3.90
#3 8 42.5
这里是演示full width text center demo的链接
答案 3 :(得分:0)
在不打扰文档流程的情况下,您可以使用负边距重新定位元素。您需要查找的是父级使用了多少边距和/或填充。我在下面的部分中使用:边距:30px,边距:10px。
因此,内容的负边距为-40px。
颜色用于改善效果的可见性。
* {
box-sizing: border-box;
}
body {
background-color: green;
margin: 0;
}
section {
margin: 0 30px;
background-color: blue;
padding: 10px;
}
.title {
text-align: center;
}
.content {
background-color: red;
display: flex;
margin-left: -40px;
width: 100vw;
}
.content>h2 {
width: calc(100% / 3);
text-align: center;
}
<section>
<div class="title">
<h1>Alicia's Laser Med Spa and Salon</h3>
</div>
<div class="content">
<h2>Visit Us</h2>
<h2>Today's Deal</h2>
<h2>Book Now</h2>
</div>
</section>