Question

我是网页设计/开发的新手，我遇到了问题。

请你帮我把图片（不是渲染）移到左边，把剩下的全部留在中心。

我试过在W3学校网站上查找，但由于某种原因我无法做到这一点。谢谢

＆＃13;

body {
  background-color: #DCDCDC;
}
.center {
  width: 500px;
  margin: 0 auto;
  text-align: center;
  .left {
    position: relative;
    right: 450px;
  }
}
ul {
  list-style-position: inside;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>My Workout Website</title>
  <link rel="stylesheet" href="C:\Users\yalokana\Desktop\style.css">
</head>
<div class="center">

  <body>
    <h1>Challenge for the next four months.</h1>
    <h3>Hello Internet! I'll introduce myself.</h3>

    <div class="left">
      <img src="http://placehold.it/200x200">
    </div>

    <p>My name is Alok and I have challenged myself.</p>
    For the next four months I want to get what i want i.e to get <strong> big and strong.</strong>
    </p>

    <p>I think to become really <strong>big and strong</strong> you need a combination of both <em>strength and endurance</em> training which I stumbled upon in <em>Brock Lesnar's</em> workout site <a href="http://theathleticbuild.com/brock-lesnar-muscle-building-and-mma-workout/"> workout routine.</a>
    </p>
    </p>
    <p>Sample of what those are have been pasted down below.</p>
    <h3>Day 1: Day1:  Chest/Triceps</h3>
    <ul>
      <li>Bench Press: 6 sets of 12 reps</li>
      <li>Incline Dumbbell Press: 4 sets of 10 reps</li>
      <li>Dumbbell Flyes: 3 sets of 8 reps</li>
      <li>Cable Crossovers: 3 sets of 8 reps</li>
      <li>Triceps Dips: 4 sets of 10 reps</li>
      <li>Triceps Pushdowns: 4 sets of 10 reps</li>
      <li>Skull Crushers: 3 sets of 10 reps</li>
    </ul>

    <p>When I'm at work I try to do as much as <em>Push-ups</em> I can, <strong>50 per set.</strong>There's also a Dip bar ground stairs and I make the best use of it!</p>
</div>
</body>

</html>

＆＃13;

Answer 1

您的CSS无效：

.center {
    .left { ... }
}

CSS不允许我们在其他选择器中嵌套选择器，它们必须是分开的：

.center { ... }
.left { ... }

由于图片是内联的，而不是尝试使用right定位它们，您可以改为为.left元素提供不同的文本对齐方式：

.left {
    text-align: right;
}

.left {
  text-align: right;
}

<h1>Challenge for the next four months.</h1>
<h3>Hello Internet! I'll introduce myself.</h3>

<div class="left">
  <img src="http://placehold.it/200x200">
</div>

<p>My name is Alok and I have challenged myself.</p>

Answer 2

请尝试以下操作： Demo

CSS：

.center {
  width: 500px;
  margin: 0 auto;
  text-align: center;  
}
.left{
  float:left;
}

HTML：

 <div class="left">
        <img src="C:\Users\yalokana\Desktop\IMG_20150723_115150.jpg" />
    </div>

Answer 3

为了将图像移动到其容器的左侧 - 在这种情况下，它是div.center - 您可以向图像应用float属性。当你使用float时，它将从正常流中获取元素（在你的情况下是一个图像），结果将如下所示：

如果你想放置文字＆＃34;我的名字是Alok ......＆＃34;在图片下方，您应将clear属性应用于包含此文字的p标记。该页面现在看起来像这样：

以下是我对您的代码所做的更改：

HTML

<h3>Hello Internet! I'll introduce myself.</h3>
<img src="http://placehold.it/200x200" class="left">
<p class="clear">My name is Alok and I have challenged myself.</p>
For the next four months I want to get what i want i.e to get <strong> big and strong.</strong>
</p>

CSS

.left {
    float: left;
}
.clear {
    clear: both;
}

您可以在JSFiddle

上看到完整代码

Answer 4

使用float left到图像类

 .center {
  width: 500px;
  margin: 0 auto;
  text-align: center;
  .left {
    position: relative;
    float:left
  }
}

如何仅将图像向左移动而将其余部分保留在中心？

4 个答案: