Tag:javascriptcsshtmlhtml5css3
Article From:https://segmentfault.com/q/1010000012151440
Question:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

      .main {
        width: 300px;
        border: 1px solid gray;
      }

      .title {
        font-weight: bold;
        vertical-align: top;
      }

      .content {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <span class="title">Title: < /span>< span class= "content" > many contents, many contents, many contents, many contents, many contents, many contents, many contents < /span></div>< /body>< /html>

Answer 0:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
          *{margin:0;padding:0;}
      .main{width: 300px;position: relative;}
      .title{display: inline-block;font-weight: 700;}
      .content{display: inline-block;position: absolute;}
    </style>
</head>
<body>
  <div class="main">
    <span class="title">Title < /span>< span class= "content" > content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentThe content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content < /sPan>< /div>< /body>< /html>


This method does not support the outer.Main, and is suitable for the situation without background color. If you want to expand, you can choose the left Title float and the right side render to block.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
          *{margin:0;padding:0;}
      .main{width: 300px;clear: both;background: #ddd;}
      .title{display: inline-block;font-weight: 700;float: left;}
      .content{display: block;overflow: hidden;}
    </style>
</head>
<body>
  <div class="main">
    <span class="title">Title < /span>< span class= "content" > content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentContent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content contentThe content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content < /sPan>< /div>< /body>< /html>

Answer 1:
<div class="main">
      <span class="title" style="display: table-cell;white-space: nowrap">Title: < /span>< span class= "content" style= "display: table-cell;" > many contents, many contents, many contents, many contents, and many contents.A lot of content < /span>< /div>Try this?

Answer 2:

Let the title go to the left.

Answer 3:

The first:

Father level: overflow: hidden;On the left: float: left;On the right: overflow: hidden;

Second kinds:

The left side gives a fixed width and the right side gives a margin-left: left width.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *