用于文本块ON MOBILE旁边的图像的CSS

时间:2017-02-19 01:55:33

标签: html image css-float

最好的方法是什么?

我有一个全宽行(320px)。 160px是一侧的图像,另一侧是160px是为文本保留的。它是一个简单的浮点数,还是一个破坏性较小的方式?

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp1.0</TargetFramework>
    <PreserveCompilationContext>true</PreserveCompilationContext>
    <AssemblyName>ProjectName</AssemblyName>
    <OutputType>Exe</OutputType>
    <PackageId>ProjectName</PackageId>
    <UserSecretsId>noooooooooooooooooooope</UserSecretsId>
    <RuntimeFrameworkVersion>1.0.3</RuntimeFrameworkVersion>
    <PackageTargetFallback>$(PackageTargetFallback);portable-net45+win8+wp8+wpa81;</PackageTargetFallback>
  </PropertyGroup>

  <ItemGroup>
    <Content Update="wwwroot\**\*;**\*.cshtml;appsettings.json;web.config">
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    </Content>
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="1.0.0-msbuild3-final">
      <PrivateAssets>All</PrivateAssets>
    </PackageReference>
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="1.0.0-msbuild3-final">
      <PrivateAssets>All</PrivateAssets>
    </PackageReference>
    <PackageReference Include="SendGrid.NetCore" Version="1.0.0-rtm-00002" />
   
    <PackageReference Include="MailKit" Version="1.10.2" />
    
    <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Diagnostics" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.1" />
    <PackageReference Include="Microsoft.AspNetCore.Routing" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Server.IISIntegration" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.Server.Kestrel" Version="1.1.0" />
    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="1.1.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer.Design" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Configuration.UserSecrets" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Logging" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Logging.Console" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="1.1.0" />
    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="1.1.0" />
    <PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink.Loader" Version="14.1.0" />
    <PackageReference Include="WindowsAzure.Storage" Version="8.1.0" />
    <!--<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2016.3.1118" />-->
    <PackageReference Include="Microsoft.AspNet.WebApi.Client" Version="5.2.3" />
  </ItemGroup>

  <Target Name="PrepublishScript" BeforeTargets="PrepareForPublish">
    <Exec Command="bower install" />
    <Exec Command="dotnet bundle" />
  </Target>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="1.0.0-msbuild3-final" />
    <DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="1.0.0-msbuild3-final" />
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0-msbuild3-final" />
  </ItemGroup>

</Project>

CSS

        <div class="two-up_img u-pull-right">
            <figure>
                <img src="../img/img.jpg">
            </figure>
        </div>

        <div class="two-up_info">
            <div class="inner">
                <h4 class="highlight">Rob</h4>
                <div class="small">
                    <p>Landing Page</p>
                    <p>Brand Identity</p>
                </div>
            </div>
        </div>

我正在使用一个名为Skeleton(http://getskeleton.com/)的框架,这是.two-up_info { height: 160px; background: #fff; } .two-up_info .inner { text-align: center; position: relative; top: 50%; transform: translateY(-50%); } .two-up_img { max-width: 50%; } 来自的地方。它向右浮动一个元素。

1 个答案:

答案 0 :(得分:0)

您希望将html包装在父class StandardError def to_str self.to_s end end 中,并将样式div应用于该父clear: both

看到这个小提琴:https://jsfiddle.net/5gkzh2pa/

或者,如果您不关心支持旧浏览器,请查看flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/