Question

不知道为什么我自己不能弄清楚这个，因为它感觉比较简单，我想内联显示两个“块”。我想要的结果可以在下面的超链接中找到（转到图像）

我拥有的html

#content-main {
  float: right;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <title>challenge 5</title>
</head>

<body>

  <div id="header">
    <blockquote>
      <p>Learning is not a privilege, it's a right.</p>
    </blockquote>
    <div id="logo">
      <h1>live and let learn</h1>
      <img src="img/Csschallenge5.jpg" alt="live and let learn">
    </div>

  </div>

  <div id="content">
    <div id="content-side">
      <dl>
        <dt><a href="services/">Services</a></dt>
        <dd>Learning and facilitation through TAFE WSI</dd>

        <dt><a href="learning/">Personal Learning</a></dt>
        <dd>Learning from the network</dd>

        <dt><a href="resources/">Resources</a></dt>
        <dd>Browse through resources ...</dd>

        <dt><a href="about/">About</a></dt>
        <dd>What am I about? Personal interests and other stuff</dd>
      </dl>
    </div>
    <!-- content-side -->

    <div id="content-main">
      <h2>Please update your links!</h2>
      <small>Wednesday, October 12th, 2005</small>

      <p>New blog address: <a href="http://liveandletlearn.net/learning/">
              http://liveandletlearn.net/learning/</a>
      </p>
      <p>During the last holidays I've been busy moving my blog from
        <a href="http://www.absoludity.net/blog/">absoludity.net</a> to
        <a href="http://liveandletlearn.net/learning/">liveandletlearn.net</a> ... why? Good question! Part of the Web Design course that I facilitate is a client project where participants are required to develop a site from start to finish - and i'd
        been a while since I'd been through that process myself - so what better a project for the holidays (next to my gardening project to get me <em>away</em> from the computer)!
      </p>

      <p>You'll notice that the site itself is still in prototype stage, but the blog is all up and running so I'm going to be using liveandletlearn from now on. <strong>Please update your 
              bookmarks/feeds</strong>! And please give me any feedback you've got time for at
        <a href="http://liveandletlearn.net/learning/">liveandletlearn.net</a>!
      </p>
    </div>
    <!-- content-main -->
  </div>
  <!-- content -->

</body>

</html>

我没有太多的CSS，因为我不确定从哪里开始，这就是我的全部：

 #content-main {
        float: right;
    }

有人告诉我使用display: inline;或float: right;

它可以执行某些操作，但不能完成我要实现的目标，我正在尝试实现这一目标。 Website Layout/Example

我尝试研究它无济于事。我已经有一段时间没有使用CSS了，请原谅我的生锈。

Answer 1

这将帮助您

#content-side {
  width: 50%;
  float: left;
}

#content-main {
  width: 50%;
  float: right;
}

为使您的设计具有更好的响应能力，我建议您使用Bootstrap，它将轻松进行此类操作。

Answer 2

使用CSS Flexbox，这非常简单。只需通过以下方式更新CSS样式：

#content {
  display: flex;
}

Answer 3

如果可以使用CSS flexbox更好。请在下面检查：

#content {
display:flex;
}
#content-side {
width:30%; <!-- set your content-side block width as per your design -->
}
#content-main {
width:70%; <!-- set your content-main block width as per your design -->
}

希望它可以帮助您！

Answer 4

使用CSS flexbox布局。为content-side和content-main添加flex属性。 flex是flex-grow，flex-shrink和flex-basis的简写。

下面是您可以尝试的CSS。

//Hey..CategoryViewController.swift

CSS-如何内联显示信息块

4 个答案: