Question

所以我的学校正在参加这个比赛，五个最好的网站赢得了RaspBerry Pi。我目前陷入困境。我看起来迷失了地方，但似乎没有任何工作。这是我在JSFiddle上的一些代码的链接。

我的问题是，我的中间栏有一个DIV，其中包含我的所有信息。去，我正在尝试将其格式化为左边的图像和左边的文本，唯一的问题是我希望将它放在div中它完全覆盖文本的地方。如果您看到文本超出灰色背景的位置，那就是问题所在。

 <!DOCTYPE! html>
  <html>
     <head>
    <style>
            body,
            html {
            margin-top: -11px;
            margin: 0;
            height: 100%;
            min-width: 1000px;
            background-color: red;
            }

            .bg {
            margin-left: 20%;
            width: 60%;
            background-color: grey;
            border-left: thick solid black;
            border-right: thick solid black;
            }

            .background {
            background-image: url("images/background.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            min-height: 100%;
            }

            .banner {
            width: 100%;
            border-bottom: thick solid black;
            }

            ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            border-bottom: thick solid black;
            }

            li {
            float: left;
            }

            li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none!important;
            font-family: "Arial Black", Gadget, sans-serif;
            }

            li a:hover:not(.active) {
            background-color: #111;
            }

            .active {
            background-color: #FFD700;
            color: black;
            }

            .header {
            font-size: 80pt;
            font-family: "Arial Black", Gadget, sans-serif;
            color: black;
            text-align: center;
            min-width: 80pt;
            }

            .dotted_line {
            border-top: 2px dashed black;
            width: 70%;
            }

            .paragraph {
            font-size: 15pt;
            width: 500px;
            margin-left: 0%;
            color: black;
            }

            .sub_header {
            text-align: center;
            font-size: 50pt;
            color: black;
            }

            .credit {
            width: 560;
            size: 20pt;
            text-align: center;
            font-style: italic;
            }

            .video {
            width: 70%;
            margin-left: 15%;
            border: thick solid black;
            }

            .credit_link {
            text-decoration: none;
            }

            #image {
            width: 45%;
            }

            #text {
            width: 45%;
            float: left;
            font-size: 15pt;
            color: black;
            padding-top: 20px;
            -webkit-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -moz-text-size-adjust: none;
            text-size-adjust: none;
            }

            .format {
            width: 90%;
            margin-left: 10%;
            }
       </style>
      </head>
       <body>
      <div class="background">
        <div class="bg">
        <img src="https://i.imgur.com/gsceMM5.png" class="banner">
        <ul>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="stats.html">Stats</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="info.html">Info</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
        <p class="header"> WELCOME</p>
        <hr class="dotted_line" />
        <p class="sub_header">What is Bitcoin?</p>
        <video class="video" poster="images/thumbnail.jpg" controls>
            <source src="videos/info.mp4" type="video/mp4">
        </video>
        <p class="credit">
            (Credit to <a class="credit_link" 
        href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on 
   youtube.com)
        </p>
        <div class="format">
            <img src="https://i.imgur.com/BGsKZms.png" id="image" />
            <p id="text">
            Bitcoin is a new currency that was created in 2009 by an unknown 
    person using the alias Satoshi Nakamoto. Transactions are made with no 
    middle men – meaning, no banks! Bitcoin can be used to book hotels on 
     Expedia, shop for furniture on Overstock and
            buy Xbox games. But much of the hype is about getting rich by 
    trading it. The price of bitcoin skyrocketed into the thousands in 2017.
            </p>
        </div>
        </div>
    </div>
    </body>
 </html>

我的代码由于某种原因没有在这里组织，但我只是复制了重要的东西，遗漏了我必须做的所有组织和事情，因为生病最终到了。

Answer 1

幸运的是，这很容易解决。您要做的就是将 overflow: hidden 添加到if (arg instanceof Long) { // Cast to Long is safe } else if (arg instanceof Integer) { // Cast to Integer is safe } else { // Neither Long nor Integer, for example Double throw new IllegalArgumentException("Only Long and Integer supported."); }，以便容器展开以允许后台覆盖其中包含的所有文本，而不是滚动条：

＆＃13;

.format

＆＃13;

body,
html {
  margin-top: -11px;
  margin: 0;
  height: 100%;
  min-width: 1000px;
  background-color: red;
}

.bg {
  margin-left: 20%;
  width: 60%;
  background-color: grey;
  border-left: thick solid black;
  border-right: thick solid black;
}

.background {
  background-image: url("images/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
}

.banner {
  width: 100%;
  border-bottom: thick solid black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-bottom: thick solid black;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none!important;
  font-family: "Arial Black", Gadget, sans-serif;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #FFD700;
  color: black;
}

.header {
  font-size: 80pt;
  font-family: "Arial Black", Gadget, sans-serif;
  color: black;
  text-align: center;
  min-width: 80pt;
}

.dotted_line {
  border-top: 2px dashed black;
  width: 70%;
}

.paragraph {
  font-size: 15pt;
  width: 500px;
  margin-left: 0%;
  color: black;
}

.sub_header {
  text-align: center;
  font-size: 50pt;
  color: black;
}

.credit {
  width: 560;
  size: 20pt;
  text-align: center;
  font-style: italic;
}

.video {
  width: 70%;
  margin-left: 15%;
  border: thick solid black;
}

.credit_link {
  text-decoration: none;
}

#image {
  width: 45%;
}

#text {
  width: 45%;
  float: left;
  font-size: 15pt;
  color: black;
  padding-top: 20px;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

.format {
  width: 90%;
  margin-left: 10%;
  overflow: hidden;
}

＆＃13;

我还创建了一个展示 here 的代码段。

希望这有帮助！：）

格式化我的网站

1 个答案: