CSS: How do you line up 4 divs, but the last one spans 2 lines?_问答_开发者

CSS: How do you line up 4 divs, but the last one spans 2 lines?

开发者 https://www.devze.com 2023-01-15 20:51 出处：网络

In my code below, how do I get the the text in the class=\"author\" to right align underneath the text in class=\"label\"? In the example below, the \"e\" in \"Author name\" should right align underne

相关专题：css

In my code below, how do I get the the text in the class="author" to right align underneath the text in class="label"? In the example below, the "e" in "Author name" should right align underneath the ":' in "Answered by:". Thanks.

<html>
<head>
   <style type="text/css">
        .action {
            display: inline;
        }

        .add-box {
            margin-left: 40px;
            display: inline;

        }
        .share-button {
            margin-left: 30px;
            display: inline;
        }
        .flag {
            margin-left: 30px;
            display: inline;
        }
        .author-area {
            margin-left: 30px;
            display: inline;
        }
        .la开发者_开发技巧bel {
            margin: 0;
            display: inline;
        }
        .author {
            margin: 0;
        }
        .gray-button {
        background: #C0C0C0;
        font-size: 14px;
        margin:0;
        padding: 10px;
        border: 1px solid #C0C0C0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        cursor: pointer;
        }
   </style>
</head>

<body>
    <div class="action">
        <div class="add-box">
            <a href="#" class="gray-button">Plan</a>
        </div>
        <div class="share-button">
            <a> Share </a>
        </div>
        <div class="flag">
            <a>flag</a>
        </div>
        <div class="author-area">
            <p class="label">Answered by:</p>
            <p class="author"><a href="#"></a>Author name </p>
        </div>
    </div>

</body>

You can use 'inline-block' on the '.author-area':

.author-area {
  margin-left: 30px;
  display: inline-block;    
  vertical-align: top;
}

The 'vertical-align' option stops the div from sticking out above the others.

Theres a couple of options. But you can try to float the elements to the left and set a text-align:right to the author-area DIV.

<style type="text/css">
    .action {
        display: inline;
        float: left;
    }
    .add-box {
        margin-left: 40px;
        display: inline;
        float: left;
    }
    .share-button {
        margin-left: 30px;
        display: inline;
        float: left;
    }
    .flag {
        margin-left: 30px;
        display: inline;
        float: left;
    }
    .author-area {
        margin-left: 30px;
        display: inline;
        float: left;
        text-align: right;
    }
    .label {
        margin: 0;
        display: inline;
    }
    .author {
        margin: 0;
    }
    .gray-button {
    background: #C0C0C0;
    font-size: 14px;
    margin:0;
    padding: 10px;
    border: 1px solid #C0C0C0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    cursor: pointer;
    }
</style>

I always like to use a CSS grid system, such as

http://www.1kbgrid.com/

to do my div positioning etc with... makes it a snap to do things like you outline above