Question

因此，我正在尝试使图像向左浮动，并在拐角处变圆。

但是，这似乎对我不起作用。它应该可以正常运行，因为我以前已经成功执行了此操作。

相关HTML

<div class="container">
    <div class="row">
      <img class="left rounded-corners" alt="REDACTED" src="REDACTED" width="320" height="186" />
    </div>
  </div>
  <div style="clear: both;"></div>

相关CSS

.container {}

.left {
float: left;
}

.right {
float: right;
}

img {
display: block;
}

.img-left {
float: left;
}

.img-right {
float: right;
}

.img-rounded-corners {
border-radius: 10px;
}

.rounded-corners {
border-radius: 10px;
}

.row {
display: block;
}

完整代码

完整HTML

<!DOCTYPE html>
<html lang="en">

<head>
<title>Project Crazy | BETA 1</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <meta name="description" content="Project Crazy | Under Construction">
  <meta name="author" content="James Timms">

  <!-- Required StyleSheets -->
  <link rel="stylesheet" type="text/css" href="styles/main.css">
  <link rel="stylesheet" href="styles/bootstrap/bootstrap.min.css">
  <link href='//fonts.googleapis.com/css?family=Lato:400,700|Luckiest+Guy' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Meera Inimai' rel='stylesheet'>

  <!-- jQuery Library -->
  <script src="js/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="js/jquery-3.3.1.slim.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

</head>

<body>
  <!-- Navigation Bar -->
  <nav class="navbar navbar-expand-sm bg-blue navbar-dark fixed-top" style="text-align: right; padding-top: 0.1vh; padding-bottom: 0.1vh; font-family: 'Luckiest Guy';">

    <a class="navbar-brand" style="font-size: 2vh;" href="#">
      <img src="logo.png" alt="Project Crazy" style="width:40px;">
    </a>

    <!-- NavBar Links -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" style="font-size: 2vh;" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style="font-size: 2vh;" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" style="font-size: 2vh;" href="#">Link 3</a>
      </li>
    </ul>

  </nav>

  <div class="space1" style="padding-bottom: 20vh;"></div>
  <div class="card" style="max-width: 50%; margin: auto;">
    <div class="card bg-info text-white" style="font-size: 25px; font-family: 'Luckiest Guy';">
      <center>Welcome To Project Crazy!</center>
    </div>

    <div class="card-body" style="font-family: 'Meera Inimai';">
      Project Crazy is the number one resource for ToonTown: Corporate Clash! More resources are added constantly, so make sure you visit frequently to see if anything changes!
      <br />
      <br />
      <div class="header">What's on Offer?</div>
      Here at Project Crazy, you can do many, many things! Here are a few of the main attractions!
      <br />

      <div class="container">
        <div class="row">
          <img class="left rounded-corners" alt="invasion tracker" src="https://toonhq.org/static/2.4.3/img/home/invasions.jpg" width="320" height="186" />
        </div>
      </div>
      <div style="clear: both;"></div>


    </div>
    <div class="card-footer"></div>
  </div>


  <!-- Footer -->
  <footer class="page-footer font-small bg-blue fixed-bottom ml-auto">

    <!-- Copyright -->
    <div class="footer-copyright">© 2018 Copyright [ Team Crazy ]
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->
</body>

</html>

完整CSS

/* Parallax Scrolling Blurred Background */

body {
  margin: 0vh;
  padding-top: 0vh;
  padding-bottom: 0vh;
  overflow-x: hidden;
}

body::before {
  background: url('../img/bg.png') no-repeat center center fixed;
  content: '';
  z-index: -1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  -webkit-font-smoothing: subpixel-antialiased;
}

/* width */

::-webkit-scrollbar {
  width: 0vh;
  background-color: #F5F5F5;
}

/* Track */

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background-color: #3399FF;
}

.bg-blue {
  background-color: #3399FF !important
}

a.bg-dark:focus, a.bg-dark:hover, button.bg-dark:focus, button.bg-dark:hover     {
  background-color: #1d2124 !important
}

.page-footer {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 0.2vh;
  padding-right: 0px;
  padding-left: 178vh;
  padding-bottom: 0.2vh;
}

.footer-copyright {
  font-family: 'Luckiest Guy';
  font-size: 1.4vh;
  color: #fff;
}

.header {
  font-family: 'Luckiest Guy';
  font-size: 2.5vh;
}

.container {}

.left {
  float: left;
}

.right {
  float: right;
}

.img-left {
  float: left;
}

.img-right {
  float: right;
}

.img-rounded-corners {
  border-radius: 10px;
}

.rounded-corners {
  border-radius: 10px;
}

.row {
  display: block;
}

希望有人可以弄清楚为什么它不起作用，因为已经提供了它应该起作用。我不是HTML和CSS的新手。我之前已经测试过了，它应该可以工作，只是因为这个，我有点不知所措。

Answer 1

尝试

<div class="container">
<div class="row">
  <img class="img-rounded" alt="REDACTED" src="REDACTED" width="320" height="186" />
</div>

因为“ img-rounded”类在引导程序中使用以使其变圆，然后在CSS中，您可以向此类添加float：left，例如：

.img-rounded { float:left; }

我希望这会有所帮助。

Answer 2

尝试一下：（我使用了Ayush的html代码）

<div class="container">
<div class="row">
  <img class="img-rounded" alt="REDACTED" src="REDACTED" width="320" height="186" />
</div>

具有样式

.img-rounded{
    position: relative;
    float: left;
    border-radius: 10px;
}

IMG类别不适用

2 个答案: