Html IMG类不适用_Html_Css - Fatal编程技术网

Html IMG类不适用

html css

Html IMG类不适用,html,css,Html,Css,因此，我试图使图像向左浮动，并绕过拐角然而，这似乎对我不起作用。它应该工作，因为我已经成功地执行了这之前相关HTML <div class="container"> <div class="row"> <img class="left rounded-corners" alt="REDACTED" src="REDACTED" width="320" height="186" /> </div> </div

因此，我试图使图像向左浮动，并绕过拐角

然而，这似乎对我不起作用。它应该工作，因为我已经成功地执行了这之前

相关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>

<!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>

完整代码

完整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>

<!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>

希望有人能找出为什么这不起作用，因为已经提供了这应该起作用的条件。我对HTML和CSS并不完全陌生。我以前测试过这个，它应该可以工作，只是有了这个，我有点困惑。

试试看

<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四舍五入{
浮动：左；
}

我希望这有帮助。

试试这个：（我使用了Ayush的html代码）

你能澄清一下“似乎对我不起作用”吗？通过包含

img{display:block；}

可能无法获得预期的输出，但是图像是左对齐的，并且根据您提供的代码具有圆角。好的，这些类都不适用。图像未圆整，也未对齐。您可能没有正确加载css文件（猜测它可能是外部的？）。当包含在与html相同的文件中的

块中时，对我来说很有效。CSS文件加载良好，样式表中的其他所有内容也很好，我有自定义导航栏、自定义滚动条和自定义背景图像，这些都很好。我将您的确切代码复制到了codepen（我刚刚添加了一个测试图像）它的工作原理是不加载css，或者有其他干扰1。img.rounded不是引导程序4 2的一部分。我不能这样做，我需要使用两个独立的类。一个用于左浮动，一个用于四舍五入。因为事实上，我将有多个图像使用圆形边缘，一些向右浮动。我只使用这个名称，你可以选择任何你想要的名称。我的主要想法是指向

位置样式属性：D
<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;
}