区块

Question

我在考虑如何制作这个块。但我被卡住了。我不知道如何使图像占据剩余内容的25％，其他75％是文本。 我正在使用Bootstrap 3。

IMAGE

HTML：

 .card-profile,
    .card-testimonial {
        margin-top: 30px;
        text-align: center;
    }
    .card {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-bottom: 30px;
        border-radius: 6px;
        color: rgba(0,0,0, 0.87);
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .img-rounded {
        border-radius: 6px;
    }
    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }

<div class="col-md-12">
        <div class="card card-profile">

            <div class="col-md-4">
              <img src="assets/img/faces/avatar.jpg" alt="Rounded Image" class="img-rounded img-responsive">
            </div>
            <div class="col-md-8">
              Text
            </div>
        </div>


   

结果我得到了这个IMAGE

Answer 1

这就是你想要的吗？

＆＃13;

＆＃13;

.card-profile,
    .card-testimonial {
        margin-top: 30px;        
    }
    .card {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-bottom: 30px;
        border-radius: 6px;
        color: rgba(0,0,0, 0.87);
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        display: flex;
    }
    .img-rounded {
        border-radius: 6px;
    }
    .img-responsive {
        display: block;
        max-width: 100%;
        height: auto;
    }
	.center-text{
		text-align: center;    
	}
  .middle-center{
    top: 50%;
    position: relative;
    transform: translateY(-50%);
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
        <div class="card card-profile">
            <div class="col-md-4 col-xs-4">
              <img src="https://orig00.deviantart.net/e4cc/f/2012/142/f/b/_portal_2__black_floor_panel_wall_panel_by_themackenzie-d50qjf0.png" alt="Rounded Image" class="img-rounded img-responsive">
            </div>
            <div class="col-md-8 col-xs-8 center-text">
              <div class="middle-center">Text Text Text text Text Text</div>
            </div>
        </div>
 </div>

＆＃13;

＆＃13;

＆＃13;