Question

我正在尝试使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

Answer 1

在这种情况下，您的代码位于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>

Answer 2

您可以将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>

Answer 3

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的链接

Answer 4

在不打扰文档流程的情况下，您可以使用负边距重新定位元素。您需要查找的是父级使用了多少边距和/或填充。我在下面的部分中使用：边距：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>

无法使Div填满Wordpress上的整个宽度

4 个答案: