Question

我在“ col”的侧面有空白。

我不要这个。我希望#first和#second能够完美地将页面分割为50/50，没有奇怪的填充物抛出y轴。

我以为2 class =“ col”可以为我做到这一点，但这真是令人毛骨悚然。有更好的方法吗？

#banner
{
width: 100%;
height: 328px;
background: url(img/banner_background.jpg) repeat center fixed; 
position: relative;
padding-top: 25px;
overflow: hidden;
}
.flex-container 
{
display: flex;
justify-content: center;
}
#menubutton
{
position: absolute;
top: 80px;
right: 20px;
background: url(img/menubutton.jpg) no-repeat center ; 
height:68px;
width:68px;
display: block;
}
#menubutton:hover
{
position: absolute;
top: 80px;
right: 20px;
background: url(img/menuup.jpg) no-repeat center ; 
height:68px;
width:68px;
display: block;
}
#biglogo
{
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 2s;
}
@keyframes example {
    0%   {margin-top: 200px;}
    100% {margin-top: 0px;}
}
#work
{
width: 100%;
height: 94px;
background-color: #3de1ff;
padding-top: 10px;
}
#work a
{
margin-left: 100px;
}
#logoscrolls
{
width: 100%;
}
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-y: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
#first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font: normal normal 30px/50px Times, serif;
flex-direction: column;
}
#second
{
border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <meta name="description" content="">
  <meta name="keywords" content="">
  
  <!-- START Google Analytics -->
  
  <!-- END Google Analytics -->  
  <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>

<section class="flex-container" id="banner">
<a href="#" id="biglogo"><img class="img-fluid" src="img/logo.png" alt="Digital Marketing - 2Teso" height="282px" width="282px"></a>
<a href="#" id="menubutton" onclick="openNav()"></a>
<!-- The overlay -->
<div id="myNav" class="overlay">

  <!-- Button to close the overlay navigation -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

</div>
</section>
<section id="work">
 <marquee id="logoscrolls" behavior="scroll" direction="left">
<a href="#" id="spalogo"><img src="img/spalogo.png" alt="Shangrila Massage Spa" height="72px" width="116px"></a>
<a href="#" id="minilogo"><img src="img/minilogo.png" alt="2Teso Mini Logo" height="72px" width="73px"></a>
  </marquee>

</section>

<div class="fluid-container">
<div class="row">

<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div id="first" class="col"><span>Your Business Online</span><span>View Our Services</span></div>


<div id="second"class="col"></div>
</div>
</div>

<script>
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

</body>
</html>

有什么方法可以将#first #second划分为一半的页面，而y轴上没有空格。

Answer 1

您可以通过将以下属性添加到.css文件中来实现此目的：

.row {
  width: 100vw;
  box-sizing: border-box;
}

希望这对您有用！

col侧面上不需要的白色y轴空间-bootstrap CSS

1 个答案: