Question

我有这个布局:(也是JSFiddle here）

.rotate {
  transform: rotate(270deg) translate(-10em, 0);
  transform-origin: 0 0;
  float: left;
}

.left {
  float: left;
}

<div class='rotate'>
  Rotated
</div>
<div class='left'>
  Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br>
</div>

我试图将.rotate div放在.left div旁边，但我不能。

我试过......

也将左侧的旋转div浮动（在代码段中），但它占用的宽度就像没有旋转一样。
添加position:absolute和left:0，但之后与内容重叠

如何让div与左浮动的div一起旋转？

Answer 1

只需更改已旋转div的translate，并从该元素中删除.rotate { transform: rotate(270deg); transform-origin: 100% 100%; float:left; } .left { float: left; }。

＆＃13;

<div class='rotate'>
  Rotated
</div>
<div class='left'>
  Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br>
</div>

＆＃13;

const _                 = require('lodash')
    Boom                = require('boom'),
    When                = require('when'),
    User                = require('../../models/user');

var users;
/**
 * Contact core functionality
 */
users = {


    /**
     * Find user by id
     *
     * @param       {id} user id
     * @returns     {Promise(User)} User
     */
    findById: (id) => {
        if (_.isEmpty(id)) {
            return When.reject(Boom.badRequest('User id missing.'))
        }
        return User.get(id).run().then( (user) => {
            if (user) {
                return When.resolve(user)
            }
            return When.reject(Boom.notFound('No user registered with provided id.'))
        }).error((error) => {
            return When.reject(error)
        });
    },

    /**
     * Returns all contacts of user from database
     * @returns     [{Promise(Contact)}] contacts
     */
    findContacts: (userId) => {
        if (_.isEmpty(userId)) {
            return When.reject(Boom.badRequest('User id missing.'))
        }
        return User.get(userId).run().then( (user) => {
            if (user) {
                if(_.isObject(user.contacts)){
                    user.contacts = _.map(user.contacts, (contact) => {
                        this.findById.then((user) => {
                            contact.user = user
                        })
                        return contact
                    })
                    return When.resolve(user.contacts)
                }
                return When.reject(Boom.notFound('No contacts registered with provided user.'));
            }
        }).error((error) => {
            return When.reject(error)
        })
    },
}

＆＃13;

旋转浮动div旁边的div

1 个答案: