按内容自动宽度排列三列中的第一列

时间:2017-06-06 06:33:17

标签: html css

也许有人能够帮助我: 我有三个专栏。第一列应该获得尽可能宽的宽度。第二列应该获得其中的内容所需的宽度。第三列宽度是固定的。

我准备了一些内容的小提琴。要想象我想要的东西,只需看看小提琴的底行。

因此,看一下第一行,第二列应该在右列之前直线移动,第一列的宽度应尽可能宽。

css部分:

.wrap {
  width: 100%;
}

.first {
  background-color: coral;
  float: left;
  min-width: 33%;
}

.second {
  background-color: lightblue;
  float: left;
}

.third {
  background-color: lightgreen;
  float: right;
  min-width: 25%;
}

html部分:

<div class="wrap">
  <div class="first">xxxxx</div>
  <div class="second">yyyy</div>
  <div class="third">zzzzzzz</div>
</div>
<br>
<br>
<br>
<div class="wrap">
  <div class="first"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
    <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  </div>
  <div class="second">yyyyyyy</div>
  <div class="third ">zzzzzz</div>
</div>

link to fiddle

1 个答案:

答案 0 :(得分:2)

试试这个:

  

注意:在课程.third中,您可以提及fixed width而不是min-width   .wrap { width: 100%; display: flex; } .first { background-color: coral; flex: 1 0 0; word-break: break-all; } .second { background-color: lightblue; } .third { background-color: lightgreen; min-width: 25%; word-break: break-all; } 根据您的要求。

检查演示here

CSS:

  public class AiExceptionLogger : ExceptionLogger
        {
            public override void Log(ExceptionLoggerContext context)
            {
                if (context != null && context.Exception != null)
                {//or reuse instance (recommended!). see note above
                    var ai = new TelemetryClient();
                    //Here you need get the CustomerId, JobId, and other. For example get the current user id
                    string re = HttpContext.Current.User.Identity.Name;

                    // Set up some properties:
                   //Here you need get what you need and add them to the properties
                    var properties = new Dictionary<string, string> {{ "Users", "vvvvv" } };
                        // Send the exception telemetry:
                    ai.TrackException(context.Exception, properties);
                }
                base.Log(context);
            }
        }