时间戳

首页 > 解决方案 > css - 如何内联显示信息块

css - css - 如何内联显示信息块

问题描述

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

我拥有的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;

它做了一些事情，但不是我想要实现的，我正在努力实现这一目标。网站布局/示例

我试过研究它无济于事。我已经有一段时间没有使用 css 了，所以请原谅我的生疏。

标签： css

解决方案

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

以下是您可以尝试的css。

#content {
    display:flex;
}
#content-side {
    flex: 0 0 25%;
}
#content-main {
    flex: 1;
}

推荐阅读